feat(HXMenu): emit open/close events

Author: Ryan A. Johnson

docs/elements/hx-menu/index.html

@@ -28,6 +28,16 @@
           </ul>
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}

src/helix-ui/elements/HXMenuElement.js

@@ -29,8 +29,13 @@ export class HXMenuElement extends HXElement {
         document.removeEventListener('click', this._onDocumentClick);
     }
 
-    attributeChangedCallback (attr, oldValue, newValue) {
-        this.setAttribute('aria-expanded', newValue === '');
+    attributeChangedCallback (attr, oldVal, newVal) {
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-expanded', isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
     }
 
     set position (value) {
@@ -68,10 +73,8 @@ export class HXMenuElement extends HXElement {
         if (value) {
             this.setAttribute('open', '');
             this._setPosition();
-            this.$emit('open');
         } else {
             this.removeAttribute('open');
-            this.$emit('close');
         }
     }