@m3e/web 2.5.4 → 2.5.6

package/dist/menu.js

@@ -38,7 +38,7 @@ class MenuItemElementBase extends KeyboardClick(Focusable(AttachInternals(Disabl
   }
 }
 /** The styles of the element. */
-MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([checked]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); } :host([checked]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
+MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${DesignToken.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${DesignToken.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${DesignToken.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
 __decorate([query(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
@@ -217,7 +217,7 @@ var M3eMenuItemElement_1;
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -316,10 +316,10 @@ _M3eMenuItemElement_defaultSlotChangeHandler = function _M3eMenuItemElement_defa
   this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
 };
 _M3eMenuItemElement_iconSlotChangeHandler = function _M3eMenuItemElement_iconSlotChangeHandler(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemElement_trailingIconSlotChangeHandler = function _M3eMenuItemElement_trailingIconSlotChangeHandler(e) {
-  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemElement_handleClick = function _M3eMenuItemElement_handleClick(e) {
   if (!e.defaultPrevented && !this._hasSubmenu) {
@@ -532,13 +532,13 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
       offset: !this.submenu ? 4 : undefined
     }, (x, y, position) => {
       if (!this.submenu) {
-        setCustomState(this, "-top", position.includes("top"));
-        setCustomState(this, "-bottom", position.includes("bottom"));
+        setCustomState(this, "--top", position.includes("top"));
+        setCustomState(this, "--bottom", position.includes("bottom"));
       } else if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
         const top = __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_getAbsolutePosition).call(this, __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")).y;
-        setCustomState(this, "-shift-down", false);
-        setCustomState(this, "-shift-up", false);
-        setCustomState(this, Math.round(y) === Math.round(top) ? "-shift-down" : "-shift-up", true);
+        setCustomState(this, "--shift-down", false);
+        setCustomState(this, "--shift-up", false);
+        setCustomState(this, Math.round(y) === Math.round(top) ? "--shift-down" : "--shift-up", true);
       }
       if (M3eDirectionality.current === "rtl") {
         this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
@@ -616,10 +616,10 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
   _activate() {
     if (this !== M3eMenuElement_1.__activeMenu) {
       if (M3eMenuElement_1.__activeMenu) {
-        deleteCustomState(M3eMenuElement_1.__activeMenu, "-active");
+        deleteCustomState(M3eMenuElement_1.__activeMenu, "--active");
       }
       M3eMenuElement_1.__activeMenu = this;
-      addCustomState(M3eMenuElement_1.__activeMenu, "-active");
+      addCustomState(M3eMenuElement_1.__activeMenu, "--active");
     }
   }
 };
@@ -640,8 +640,8 @@ _M3eMenuElement_handleSlotChange = function _M3eMenuElement_handleSlotChange() {
     __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").updateActiveItem(added.find(x => !x.disabled));
   }
   __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.forEach((x, i) => {
-    setCustomState(x, "-first", i === 0 && !x.previousElementSibling);
-    setCustomState(x, "-last", i === __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.length - 1);
+    setCustomState(x, "--first", i === 0 && !x.previousElementSibling);
+    setCustomState(x, "--last", i === __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.length - 1);
   });
 };
 _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
@@ -699,7 +699,7 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
 };
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
-    deleteCustomState(M3eMenuElement_1.__activeMenu, "-active");
+    deleteCustomState(M3eMenuElement_1.__activeMenu, "--active");
     M3eMenuElement_1.__activeMenu = undefined;
   }
 };
@@ -707,11 +707,11 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   registerStyleSheet(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:state(-active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:state(-active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:state(-active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--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,
         display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
-        border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } :host(:state(-shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:state(-shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
+        border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${DesignToken.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${DesignToken.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${DesignToken.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
 __decorate([property({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
@@ -760,7 +760,7 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -844,10 +844,10 @@ _M3eMenuItemCheckboxElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemCheckboxElement_spacePressed = new WeakMap();
 _M3eMenuItemCheckboxElement_instances = new WeakSet();
 _M3eMenuItemCheckboxElement_handleIconSlotChange = function _M3eMenuItemCheckboxElement_handleIconSlotChange(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange = function _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange(e) {
-  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemCheckboxElement_handleClick = function _M3eMenuItemCheckboxElement_handleClick(e) {
   if (!e.defaultPrevented) {
@@ -876,7 +876,7 @@ _M3eMenuItemCheckboxElement_handleMouseEnter = function _M3eMenuItemCheckboxElem
   });
 };
 /** The styles of the element. */
-M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`];
+M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`];
 M3eMenuItemCheckboxElement = __decorate([customElement("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
 
 /**
@@ -933,7 +933,7 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @attr disabled - Whether the element is disabled.
  * @attr checked - Whether the element is checked.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
  * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
@@ -1028,10 +1028,10 @@ _M3eMenuItemRadioElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemRadioElement_spacePressed = new WeakMap();
 _M3eMenuItemRadioElement_instances = new WeakSet();
 _M3eMenuItemRadioElement_handleIconSlotChange = function _M3eMenuItemRadioElement_handleIconSlotChange(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemRadioElement_handleTrailingIconSlotChange = function _M3eMenuItemRadioElement_handleTrailingIconSlotChange(e) {
-  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemRadioElement_handleClick = function _M3eMenuItemRadioElement_handleClick(e) {
   if (!e.defaultPrevented) {