@m3e/menu 1.1.11 → 1.2.0

package/dist/index.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
-import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked } from '@m3e/core';
+import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
+import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked, prefersReducedMotion } from '@m3e/core';
 import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/core/a11y';
 import { positionAnchor } from '@m3e/core/anchoring';
 import { M3eDirectionality } from '@m3e/core/bidi';
@@ -469,11 +469,11 @@ class MenuItemElementBase extends KeyboardClick(Focusable(AttachInternals(Disabl
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}<div class="wrapper">${this._renderContent()}</div></div>`;
+    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}<div class="wrapper">${this._renderContent()}</div></div>`;
   }
 }
 /** 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, 3rem); -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)[checked]) .base, :host(:not(:disabled)[aria-expanded="true"]) .base { color: var(--m3e-menu-selected-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-menu-selected-container-color, ${DesignToken.color.secondaryContainer}); } :host([checked]) .base, :host([aria-expanded="true"]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :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%; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.75rem); 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, ${DesignToken.shape.corner.medium}); } .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.5rem) !important; } @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(.-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; } }`;
 __decorate([e(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
 __decorate([e(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
 __decorate([e(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
@@ -659,13 +659,26 @@ var M3eMenuItemElement_1;
  * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
  * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
  * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
- * @cssprop --m3e-menu-selected-color - Text color for selected or expanded items.
- * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded items.
+ * @cssprop --m3e-menu-item-selected-color - Text color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.
  * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
  * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
  * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
+ * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.
+ * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.
  * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
  * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant.
  * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
  * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
  * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
@@ -675,6 +688,9 @@ var M3eMenuItemElement_1;
  * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
  * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
+ * @cssprop --m3e-menu-item-shape - Base shape of the menu item.
+ * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.
+ * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.
  */
 let M3eMenuItemElement = M3eMenuItemElement_1 = class M3eMenuItemElement extends LinkButton(Role(MenuItemElementBase, "menuitem")) {
   constructor() {
@@ -774,7 +790,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
 __decorate([r()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$1("m3e-menu-item")], M3eMenuItemElement);
 
-var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition;
+var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_activate, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
 /**
  * Presents a list of choices on a temporary surface.
@@ -835,18 +851,23 @@ var M3eMenuElement_1;
  *
  * @attr position-x - The position of the menu, on the x-axis.
  * @attr position-y - The position of the menu, on the y-axis.
+ * @attr variant - The appearance variant of the menu.
  *
  * @fires beforetoggle - Dispatched before the toggle state changes.
  * @fires toggle - Dispatched after the toggle state has changed.
  *
  * @cssprop --m3e-menu-container-shape - Controls the corner radius of the menu container.
+ * @cssprop --m3e-menu-active-container-shape - Controls the corner radius of the menu container when active.
  * @cssprop --m3e-menu-container-min-width - Minimum width of the menu container.
  * @cssprop --m3e-menu-container-max-width - Maximum width of the menu container.
  * @cssprop --m3e-menu-container-max-height - Maximum height of the menu container.
  * @cssprop --m3e-menu-container-padding-block - Vertical padding inside the menu container.
+ * @cssprop --m3e-menu-container-padding-inline - Horizontal padding inside the menu container.
  * @cssprop --m3e-menu-container-color - Background color of the menu container.
  * @cssprop --m3e-menu-container-elevation - Box shadow elevation of the menu container.
+ * @cssprop --m3e-vibrant-menu-container-color - Background color of the menu container for vibrant variant.
  * @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") {
   constructor() {
@@ -861,6 +882,8 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     /** @private */
     _M3eMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleKeyDown).call(this, e));
     /** @private */
+    _M3eMenuElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleMouseEnter).call(this));
+    /** @private */
     _M3eMenuElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleDocumentClick).call(this, e));
     /** @private */
     _M3eMenuElement_scrollController.set(this, new ScrollController(this, {
@@ -888,6 +911,11 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
      * @default "below"
      */
     this.positionY = "below";
+    /**
+     * The appearance variant of the menu.
+     * @default "standard"
+     */
+    this.variant = "standard";
     /** A value indicating whether the menu is a submenu. */
     this.submenu = false;
   }
@@ -906,6 +934,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     this.classList.add("-no-animate");
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
+    this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
     document.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
   }
@@ -913,8 +942,10 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
+    this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
     this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
     document.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
+    __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_deactivate).call(this);
   }
   /**
    * Opens the menu.
@@ -952,6 +983,12 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
       }
       this.style.top = `${y}px`;
     }), "f");
+    const parent = trigger.closest("m3e-menu");
+    if (parent) {
+      this.variant = parent.variant;
+    } else {
+      __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+    }
     this.showPopover();
     __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
     __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "true";
@@ -968,6 +1005,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
         submenu.hide();
       }
     }
+    __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_deactivate).call(this);
     this.hidePopover();
     if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
       __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "false";
@@ -1008,7 +1046,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
   }
   /** @inheritdoc */
   render() {
-    return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot>`;
+    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot></div>`;
   }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
@@ -1020,6 +1058,7 @@ _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
 _M3eMenuElement_listManager = new WeakMap();
 _M3eMenuElement_keyDownHandler = new WeakMap();
+_M3eMenuElement_mouseEnterHandler = new WeakMap();
 _M3eMenuElement_documentClickHandler = new WeakMap();
 _M3eMenuElement_scrollController = new WeakMap();
 _M3eMenuElement_toggleHandler = new WeakMap();
@@ -1031,6 +1070,10 @@ _M3eMenuElement_handleSlotChange = function _M3eMenuElement_handleSlotChange() {
   if (!__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").activeItem) {
     __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);
+  });
 };
 _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
   switch (e.key) {
@@ -1065,6 +1108,9 @@ _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
       break;
   }
 };
+_M3eMenuElement_handleMouseEnter = function _M3eMenuElement_handleMouseEnter() {
+  __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+};
 _M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
   if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
     this.hide();
@@ -1082,17 +1128,41 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
     y
   };
 };
+_M3eMenuElement_activate = function _M3eMenuElement_activate() {
+  if (this !== M3eMenuElement_1.__activeMenu) {
+    M3eMenuElement_1.__activeMenu?.classList.remove("-active");
+    M3eMenuElement_1.__activeMenu = this;
+    M3eMenuElement_1.__activeMenu?.classList.add("-active");
+  }
+};
+_M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
+  if (this === M3eMenuElement_1.__activeMenu) {
+    M3eMenuElement_1.__activeMenu.classList.remove("-active");
+    M3eMenuElement_1.__activeMenu = undefined;
+  }
+};
+(() => {
+  if (document) {
+    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; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.extraSmall}); 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); padding-block: var(--m3e-menu-container-padding-block, 0.5rem); background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer}); 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}, 
+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, 0.1875rem) + 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); } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :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}, 
         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`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: inline-flex; 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.5rem)); } :host(.-shift-up) { margin-top: var(--m3e-menu-container-padding-block, 0.5rem); } ::slotted(m3e-divider) { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); } @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; border: 1px solid CanvasText; } }`;
+        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; } }`;
 __decorate([n({
   attribute: "position-x"
 })], M3eMenuElement.prototype, "positionX", void 0);
 __decorate([n({
   attribute: "position-y"
 })], M3eMenuElement.prototype, "positionY", void 0);
+__decorate([n({
+  reflect: true
+})], M3eMenuElement.prototype, "variant", void 0);
 __decorate([n({
   type: Boolean,
   reflect: true
@@ -1139,13 +1209,26 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
  * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
  * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
- * @cssprop --m3e-menu-selected-color - Text color for selected or expanded items.
- * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded items.
+ * @cssprop --m3e-menu-item-selected-color - Text color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.
  * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
  * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
  * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
+ * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.
+ * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.
  * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
  * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant
  * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
  * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
  * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
@@ -1155,6 +1238,10 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
  * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
+ * @cssprop --m3e-menu-item-shape - Base shape of the menu item.
+ * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.
+ * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.
+ * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.
  */
 let M3eMenuItemCheckboxElement = class M3eMenuItemCheckboxElement extends Checked(Role(MenuItemElementBase, "menuitemcheckbox")) {
   constructor() {
@@ -1209,7 +1296,11 @@ _M3eMenuItemCheckboxElement_handleClick = function _M3eMenuItemCheckboxElement_h
     this.checked = !this.checked;
     this.performUpdate();
     if (!__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_spacePressed, "f")) {
-      this.menu?.hideAll(true);
+      if (!prefersReducedMotion()) {
+        setTimeout(() => this.menu?.hideAll(true), 150);
+      } else {
+        this.menu?.hideAll(true);
+      }
     }
   }
 };
@@ -1227,7 +1318,7 @@ _M3eMenuItemCheckboxElement_handleMouseEnter = function _M3eMenuItemCheckboxElem
   });
 };
 /** The styles of the element. */
-M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; } :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.5rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; }`];
+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 = __decorate([t$1("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
 
 /**
@@ -1291,13 +1382,26 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
  * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
  * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
- * @cssprop --m3e-menu-selected-color - Text color for selected or expanded items.
- * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded items.
+ * @cssprop --m3e-menu-item-selected-color - Text color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.
  * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
  * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
  * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
+ * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.
+ * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.
  * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
  * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant
  * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
  * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
  * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
@@ -1307,6 +1411,10 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
  * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
+ * @cssprop --m3e-menu-item-shape - Base shape of the menu item.
+ * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.
+ * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.
+ * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.
  */
 let M3eMenuItemRadioElement = class M3eMenuItemRadioElement extends Checked(Role(MenuItemElementBase, "menuitemradio")) {
   constructor() {
@@ -1372,7 +1480,11 @@ _M3eMenuItemRadioElement_handleClick = function _M3eMenuItemRadioElement_handleC
     this.checked = true;
     this.performUpdate();
     if (!__classPrivateFieldGet(this, _M3eMenuItemRadioElement_spacePressed, "f")) {
-      this.menu?.hideAll(true);
+      if (!prefersReducedMotion()) {
+        setTimeout(() => this.menu?.hideAll(true), 150);
+      } else {
+        this.menu?.hideAll(true);
+      }
     }
   }
 };