@m3e/web 2.0.3 → 2.0.5

package/dist/menu.js

@@ -4,8 +4,8 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
-import { query, customElement, state, property } from 'lit/decorators.js';
-import { KeyboardClick, Focusable, AttachInternals, Disabled, FocusController, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked, prefersReducedMotion } from '@m3e/web/core';
+import { query, state, property } from 'lit/decorators.js';
+import { KeyboardClick, Focusable, AttachInternals, Disabled, FocusController, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, customElement, LinkButton, Role, HoverController, setCustomState, hasAssignedNodes, ScrollController, addCustomState, deleteCustomState, Checked, prefersReducedMotion } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/web/core/a11y';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -76,7 +76,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):not([aria-expanded="true"])) .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(.-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(.-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(.-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(.-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):not([aria-expanded="true"])) .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; } }`;
 __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);
@@ -354,10 +354,10 @@ _M3eMenuItemElement_defaultSlotChangeHandler = function _M3eMenuItemElement_defa
   this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
 };
 _M3eMenuItemElement_iconSlotChangeHandler = function _M3eMenuItemElement_iconSlotChangeHandler(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemElement_trailingIconSlotChangeHandler = function _M3eMenuItemElement_trailingIconSlotChangeHandler(e) {
-  this.classList.toggle("-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) {
@@ -472,7 +472,7 @@ var M3eMenuElement_1;
  * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
  * @cssprop --m3e-menu-gap - Gap between content in the menu.
  */
-let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitElement, "menu") {
+let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends AttachInternals(Role(LitElement, "menu")) {
   constructor() {
     super(...arguments);
     _M3eMenuElement_instances.add(this);
@@ -534,7 +534,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
   connectedCallback() {
     super.connectedCallback();
     this.tabIndex = -1;
-    this.classList.add("-no-animate");
+    addCustomState(this, "-no-animate");
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
     this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
@@ -571,13 +571,13 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
       offset: !this.submenu ? 4 : undefined
     }, (x, y, position) => {
       if (!this.submenu) {
-        this.classList.toggle("-top", position.includes("top"));
-        this.classList.toggle("-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;
-        this.classList.toggle("-shift-down", false);
-        this.classList.toggle("-shift-up", false);
-        this.classList.toggle(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`;
@@ -654,14 +654,16 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => this.classList.remove("-no-animate"));
+    requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
   }
   /** @internal */
   _activate() {
     if (this !== M3eMenuElement_1.__activeMenu) {
-      M3eMenuElement_1.__activeMenu?.classList.remove("-active");
+      if (M3eMenuElement_1.__activeMenu) {
+        deleteCustomState(M3eMenuElement_1.__activeMenu, "-active");
+      }
       M3eMenuElement_1.__activeMenu = this;
-      M3eMenuElement_1.__activeMenu?.classList.add("-active");
+      addCustomState(M3eMenuElement_1.__activeMenu, "-active");
     }
   }
 };
@@ -682,8 +684,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) => {
-    x.classList.toggle("-first", i === 0);
-    x.classList.toggle("-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) {
@@ -741,23 +743,23 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
 };
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
-    M3eMenuElement_1.__activeMenu.classList.remove("-active");
+    deleteCustomState(M3eMenuElement_1.__activeMenu, "-active");
     M3eMenuElement_1.__activeMenu = undefined;
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** 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(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(.-active)) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(.-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(: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}, 
         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(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } :host(.-shift-down) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(.-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(.-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(: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; } }`;
 __decorate([property({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
@@ -890,10 +892,10 @@ _M3eMenuItemCheckboxElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemCheckboxElement_spacePressed = new WeakMap();
 _M3eMenuItemCheckboxElement_instances = new WeakSet();
 _M3eMenuItemCheckboxElement_handleIconSlotChange = function _M3eMenuItemCheckboxElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange = function _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemCheckboxElement_handleClick = function _M3eMenuItemCheckboxElement_handleClick(e) {
   if (!e.defaultPrevented) {
@@ -922,7 +924,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(.-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(: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 = __decorate([customElement("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
 
 /**
@@ -1074,10 +1076,10 @@ _M3eMenuItemRadioElement_mouseEnterHandler = new WeakMap();
 _M3eMenuItemRadioElement_spacePressed = new WeakMap();
 _M3eMenuItemRadioElement_instances = new WeakSet();
 _M3eMenuItemRadioElement_handleIconSlotChange = function _M3eMenuItemRadioElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemRadioElement_handleTrailingIconSlotChange = function _M3eMenuItemRadioElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eMenuItemRadioElement_handleClick = function _M3eMenuItemRadioElement_handleClick(e) {
   if (!e.defaultPrevented) {