@m3e/menu 1.0.0-rc.3 → 1.0.0

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -3973,6 +3973,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -4022,16 +4027,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -4046,6 +4041,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/index.js

@@ -688,6 +688,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     connectedCallback() {
         super.connectedCallback();
         this.tabIndex = -1;
+        this.classList.add("-no-animate");
         this.setAttribute("popover", "manual");
         this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
         this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
@@ -798,6 +799,11 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     render() {
         return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot>`;
     }
+    /** @inheritdoc */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        requestAnimationFrame(() => this.classList.remove("-no-animate"));
+    }
 };
 _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
@@ -868,6 +874,8 @@ M3eMenuElement.styles = css `
       box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3});
       opacity: 0;
       display: none;
+    }
+    :host(:not(.-no-animate)) {
       transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
@@ -910,7 +918,7 @@ M3eMenuElement.styles = css `
       }
     }
     @media (prefers-reduced-motion) {
-      :host {
+      :host(:not(.-no-animate)) {
         transition: none;
       }
     }