@m3e/menu 1.0.0-rc.4 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +9 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +16 -14
- package/dist/index.min.js.map +1 -1
- package/dist/src/MenuElement.d.ts +3 -1
- package/dist/src/MenuElement.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -688,6 +688,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
|
|
|
688
688
|
connectedCallback() {
|
|
689
689
|
super.connectedCallback();
|
|
690
690
|
this.tabIndex = -1;
|
|
691
|
+
this.classList.add("-no-animate");
|
|
691
692
|
this.setAttribute("popover", "manual");
|
|
692
693
|
this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
|
|
693
694
|
this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
|
|
@@ -798,6 +799,11 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
|
|
|
798
799
|
render() {
|
|
799
800
|
return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot>`;
|
|
800
801
|
}
|
|
802
|
+
/** @inheritdoc */
|
|
803
|
+
firstUpdated(_changedProperties) {
|
|
804
|
+
super.firstUpdated(_changedProperties);
|
|
805
|
+
requestAnimationFrame(() => this.classList.remove("-no-animate"));
|
|
806
|
+
}
|
|
801
807
|
};
|
|
802
808
|
_M3eMenuElement_trigger = new WeakMap();
|
|
803
809
|
_M3eMenuElement_anchorCleanup = new WeakMap();
|
|
@@ -868,6 +874,8 @@ M3eMenuElement.styles = css `
|
|
|
868
874
|
box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3});
|
|
869
875
|
opacity: 0;
|
|
870
876
|
display: none;
|
|
877
|
+
}
|
|
878
|
+
:host(:not(.-no-animate)) {
|
|
871
879
|
transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
872
880
|
transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
873
881
|
overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
@@ -910,7 +918,7 @@ M3eMenuElement.styles = css `
|
|
|
910
918
|
}
|
|
911
919
|
}
|
|
912
920
|
@media (prefers-reduced-motion) {
|
|
913
|
-
:host {
|
|
921
|
+
:host(:not(.-no-animate)) {
|
|
914
922
|
transition: none;
|
|
915
923
|
}
|
|
916
924
|
}
|