@m3e/nav-menu 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/index.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { Role, scrollIntoViewIfNeeded, PressedController, FocusController, DesignToken, Selected, Disabled, EventAttribute, AttachInternals, hasAssignedNodes } from '@m3e/core';
-import { SelectionManager, selectionManager } from '@m3e/core/a11y';
+import { LitElement, html, unsafeCSS, css } from 'lit';
+import { Selected, Disabled, EventAttribute, AttachInternals, Role, DesignToken, hasAssignedNodes, scrollIntoViewIfNeeded, PressedController, FocusController } from '@m3e/core';
+import { selectionManager, SelectionManager } from '@m3e/core/a11y';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -94,19 +94,60 @@ const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e$1(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$2(n,s,{get(){return o(this)}})}}
 
-var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
-var M3eNavMenuElement_1;
 /**
- * Presents a hierarchical menu.
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.1");
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E;
+
+var _M3eNavMenuItemElement_instances, _M3eNavMenuItemElement_items, _M3eNavMenuItemElement_menu, _M3eNavMenuItemElement_path, _M3eNavMenuItemElement_link, _M3eNavMenuItemElement_renderIcon, _M3eNavMenuItemElement_handleIconSlotChange, _M3eNavMenuItemElement_handleSlotChange, _M3eNavMenuItemElement_handleItemSlotChange, _M3eNavMenuItemElement_handleClick, _M3eNavMenuItemElement_handleCollapsibleEvent;
+var M3eNavMenuItemElement_1;
+/**
+ * An expandable item, selectable item within a navigation menu.
  *
  * @description
- * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting
- * nested expandable items, keyboard navigation, and focus management. It is highly customizable
- * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,
- * and complex menu structures.
+ * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
+ * It supports nested child items, selection, disabled and indeterminate states, and emits events for
+ * open/close transitions. The component is highly customizable via slots and CSS custom properties, and
+ * is designed for accessible, keyboard-navigable menu structures.
+ *
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
  *
  * @example
- * The following example illustrates a multilevel navigation menu.
+ * The next example illustrates a multilevel navigation menu.
  * ```html
  * <m3e-nav-menu>
  *   <m3e-nav-menu-item open>
@@ -130,295 +171,510 @@ var M3eNavMenuElement_1;
  * </m3e-nav-menu>
  * ```
  *
- * @tag m3e-nav-menu
+ * @tag m3e-nav-menu-item
  *
- * @slot - Renders the items of the menu.
+ * @slot - Renders the nested child items.
+ * @slot label - Renders the label of the item.
+ * @slot icon - Renders the icon of the item.
+ * @slot badge - Renders the badge of the item.
+ * @slot selected-icon - Renders the icon of the item when selected.
+ * @slot toggle-icon - Renders the toggle icon.
  *
- * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.
- * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.
- * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.
- * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.
- * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.
- * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.
- * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.
+ * @attr disabled - Whether the element is disabled.
+ * @attr indeterminate - Whether the element's selected / checked state is indeterminate.
+ * @attr open - Whether the item is expanded.
+ * @attr selected - Whether the item is selected.
+ *
+ * @fires opening - Emitted when the item begins to open.
+ * @fires opened - Emitted when the item has opened.
+ * @fires closing - Emitted when the item begins to close.
+ * @fires closed - Emitted when the item has closed.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.
+ * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
+ * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.
+ * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.
+ * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.
+ * @cssprop --m3e-nav-menu-item-height - Height of the item.
+ * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.
+ * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.
+ * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.
+ * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.
+ * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.
+ * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.
+ * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.
+ * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.
+ * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.
+ * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.
+ * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.
+ * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.
+ * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.
+ * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.
+ * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.
+ * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.
+ * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.
+ * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.
+ * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.
+ * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.
+ * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.
+ * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.
+ * @cssprop --m3e-nav-menu-badge-item-tracking - Letter spacing for badge slot.
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.
+ * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.
  */
-let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Role(LitElement, "tree") {
+let M3eNavMenuItemElement = M3eNavMenuItemElement_1 = class M3eNavMenuItemElement extends Selected(Disabled(EventAttribute(AttachInternals(Role(LitElement, "treeitem"), true), "opening", "opened", "closing", "closed"))) {
     constructor() {
-        super();
-        _M3eNavMenuElement_instances.add(this);
-        /** @private */ _M3eNavMenuElement_ignoreFocusVisible.set(this, false);
-        /** @private */ _M3eNavMenuElement_ignoreFocus.set(this, false);
-        /** @private */
-        this[_b] = new SelectionManager()
-            .withVerticalOrientation()
-            .withHomeAndEnd()
-            .withTypeahead()
-            .withSkipPredicate((x) => x.disabled || !x.visible)
-            .disableRovingTabIndex()
-            .onActiveItemChange(() => {
-            if (this[selectionManager].activeItem) {
-                __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_activateItem).call(this, this[selectionManager].activeItem);
-            }
-        })
-            .onSelectedItemsChange(() => {
-            const selected = this.selected;
-            for (const item of this.items) {
-                if (item !== selected) {
-                    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, item, false, false);
-                }
-            }
-            if (selected?.label) {
-                scrollIntoViewIfNeeded(selected.label, this, { block: "start", behavior: "smooth" });
-            }
-        });
-        /** @private */ _M3eNavMenuElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyDown).call(this, e));
-        /** @private */ _M3eNavMenuElement_keyUpHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyUp).call(this, e));
-        /** @private */ _M3eNavMenuElement_pointerDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handlePointerDown).call(this, e));
-        new PressedController(this, { callback: (pressed) => (__classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocus, pressed, "f")) });
-        new FocusController(this, {
-            callback: () => {
-                if (!__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocus, "f")) {
-                    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
-                }
-            },
-        });
+        super(...arguments);
+        _M3eNavMenuItemElement_instances.add(this);
+        /** @private */ this._hasChildItems = false;
+        /** @private */ _M3eNavMenuItemElement_items.set(this, []);
+        /** @private */ _M3eNavMenuItemElement_menu.set(this, null);
+        /** @private */ _M3eNavMenuItemElement_path.set(this, new Array());
+        /** @private */ _M3eNavMenuItemElement_link.set(this, null);
+        /**
+         * Whether the item is expanded.
+         * @default false
+         */
+        this.open = false;
     }
-    /** The selected item of the menu. */
-    get selected() {
-        return this[selectionManager].selectedItems[0] ?? null;
+    /** A reference to the nested `HTMLAnchorElement`. */
+    get link() {
+        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f");
     }
-    /** All the items of the menu. */
-    get items() {
-        return this[selectionManager].items;
+    /** A reference to the element used to present the label of the item. */
+    get label() {
+        return this._base ?? null;
+    }
+    /** Whether the item is visible. */
+    get visible() {
+        return !__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").some((x) => !x.open);
+    }
+    /** The full path of the item, starting with the top-most ancestor, including this item. */
+    get path() {
+        return [...__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f"), this];
+    }
+    /** Whether the item has child items. */
+    get hasChildItems() {
+        return this._hasChildItems;
+    }
+    /** The parenting item. */
+    get parentItem() {
+        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f")[__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length - 1] ?? null;
+    }
+    /** The items that immediately descend from this item. */
+    get childItems() {
+        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f");
+    }
+    /** The one-based level of the item. */
+    get level() {
+        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length + 1;
     }
     /**
-     * Expands the specified items, or all items if no items are provided.
-     * @param {M3eNavMenuItemElement | undefined} items The items to expand.
+     * Expands this item, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to expand all descendants.
      */
-    expand(items) {
-        (items ?? this[selectionManager].items).forEach((x) => x.expand());
+    expand(descendants = false) {
+        if (this.hasChildItems) {
+            this.open = true;
+            if (descendants) {
+                this.childItems.forEach((x) => x.expand(true));
+            }
+        }
     }
     /**
-     * Collapses the specified items, or all items if no items are provided.
-     * @param {M3eNavMenuItemElement | undefined} items The items to collapse.
+     * Collapses this item, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to expand all descendants.
      */
-    collapse(items) {
-        (items ?? this[selectionManager].items).forEach((x) => x.collapse());
-        const activeItem = this[selectionManager].activeItem;
-        if (activeItem && !activeItem.visible) {
-            for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {
-                if (parent.visible) {
-                    this[selectionManager].setActiveItem(parent);
-                    break;
-                }
+    collapse(descendants = false) {
+        if (this.hasChildItems) {
+            this.open = false;
+            if (descendants) {
+                this.childItems.forEach((x) => x.collapse(true));
             }
         }
     }
+    /** Toggles the expanded state of the item. */
+    toggle() {
+        if (this.hasChildItems) {
+            this.open = !this.open;
+        }
+    }
     /** @inheritdoc */
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute("tabindex", "0");
-        this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eNavMenuElement_keyDownHandler, "f"));
-        this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eNavMenuElement_keyUpHandler, "f"));
-        this.addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eNavMenuElement_pointerDownHandler, "f"));
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length = 0;
+        for (let item = this.parentElement?.closest("m3e-nav-menu-item"); item; item = item.parentElement?.closest("m3e-nav-menu-item")) {
+            __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").push(item);
+        }
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").reverse();
+        this.style.setProperty("--_nav-menu-item-level", `${this.level}`);
+        __classPrivateFieldSet(this, _M3eNavMenuItemElement_menu, this.closest("m3e-nav-menu"), "f");
     }
     /** @inheritdoc */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eNavMenuElement_keyDownHandler, "f"));
-        this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eNavMenuElement_keyUpHandler, "f"));
-        this.removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eNavMenuElement_pointerDownHandler, "f"));
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length = 0;
     }
     /** @inheritdoc */
-    render() {
-        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleSlotChange)}"></slot>`;
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("selected")) {
+            // Remove aria-selected and just use aria-current.
+            this.ariaSelected = null;
+            this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;
+            for (const icon of this.querySelectorAll(":scope > m3e-icon[slot]")) {
+                icon.toggleAttribute("filled", this.selected);
+            }
+            __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").forEach((x) => (x.selected = this.selected));
+            if (this.selected && !this.hasChildItems) {
+                this.closest("m3e-nav-menu")?.[selectionManager].notifySelectionChange(this);
+            }
+        }
+        if (changedProperties.has("open") || changedProperties.has("_hasChildItems")) {
+            this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;
+        }
+        if ((changedProperties.has("_hasChildItems") && this.disabled) || changedProperties.has("disabled")) {
+            __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").forEach((x) => (x.disabled = this.disabled));
+        }
     }
-};
-_M3eNavMenuElement_ignoreFocusVisible = new WeakMap();
-_M3eNavMenuElement_ignoreFocus = new WeakMap();
-_M3eNavMenuElement_keyDownHandler = new WeakMap();
-_M3eNavMenuElement_keyUpHandler = new WeakMap();
-_M3eNavMenuElement_pointerDownHandler = new WeakMap();
-_M3eNavMenuElement_instances = new WeakSet();
-_b = selectionManager;
-_M3eNavMenuElement_handleSlotChange = function _M3eNavMenuElement_handleSlotChange() {
-    const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-nav-menu-item")]);
-    for (const item of added) {
-        item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement_1.__nextId++}`;
-    }
-    if (this[selectionManager].activeItem) {
-        this.setAttribute("aria-activedescendant", this[selectionManager].activeItem.id);
-        __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
+    /** @inheritdoc */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        const base = this._base;
+        if (base) {
+            [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));
+        }
     }
-    else {
-        this.removeAttribute("aria-activedescendant");
+    /** @inheritdoc */
+    render() {
+        return html `<div class="base" @click="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleClick)}">
+        <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" centered ?disabled="${this.disabled}"></m3e-ripple>
+        <div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_renderIcon).call(this)}</div>
+        <div class="label">
+          <slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleSlotChange)}"></slot>
+        </div>
+        <slot name="badge"></slot>
+        <div aria-hidden="true" class="toggle">
+          <slot name="toggle-icon">
+            <svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor">
+              <path d="M480-360 280-560h400L480-360Z" />
+            </svg>
+          </slot>
+        </div>
+      </div>
+      <m3e-collapsible
+        class="group"
+        role="group"
+        aria-hidden="${o(this._hasChildItems ? undefined : "true")}"
+        ?open="${this._hasChildItems && this.open}"
+        @opening="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
+        @opened="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
+        @closing="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
+        @closed="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
+      >
+        <slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleItemSlotChange)}"></slot>
+      </m3e-collapsible>`;
     }
 };
-_M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e) {
-    __classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocusVisible, false, "f");
-    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
-    const item = this[selectionManager].activeItem;
-    if (e.defaultPrevented || !item || item.disabled)
-        return;
-    switch (e.key) {
-        case "Enter":
-        case " ":
-            e.preventDefault();
-            if (item.ripple && !item.ripple.visible) {
-                item.ripple.show(0, 0, true);
-            }
-            if (item.hasChildItems) {
-                item.toggle();
-            }
-            else if (!item.selected) {
-                this[selectionManager].select(item);
-                item.link?.click();
-            }
-            break;
-        case "*":
-            e.preventDefault();
-            item.expand(true);
-            break;
-        case "Left":
-        case "ArrowLeft":
-            e.preventDefault();
-            if (item.hasChildItems && item.open) {
-                item.collapse();
-            }
-            else {
-                const parent = item.parentItem;
-                if (parent) {
-                    parent.collapse();
-                    this[selectionManager].setActiveItem(parent);
-                }
-            }
-            break;
-        case "Right":
-        case "ArrowRight":
-            if (item.hasChildItems) {
-                if (!item.open) {
-                    e.preventDefault();
-                    item.expand();
-                }
-                else {
-                    try {
-                        this[selectionManager].vertical = false;
-                        this[selectionManager].onKeyDown(e);
-                    }
-                    finally {
-                        this[selectionManager].vertical = true;
-                    }
-                }
-            }
-            else {
-                e.preventDefault();
-            }
-            break;
-        default:
-            this[selectionManager].onKeyDown(e);
-            break;
-    }
+_M3eNavMenuItemElement_items = new WeakMap();
+_M3eNavMenuItemElement_menu = new WeakMap();
+_M3eNavMenuItemElement_path = new WeakMap();
+_M3eNavMenuItemElement_link = new WeakMap();
+_M3eNavMenuItemElement_instances = new WeakSet();
+_M3eNavMenuItemElement_renderIcon = function _M3eNavMenuItemElement_renderIcon() {
+    const icon = html `<slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}"></slot>`;
+    return this.selected && !this.hasChildItems
+        ? html `<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}">${icon}</slot>`
+        : icon;
 };
-_M3eNavMenuElement_handleKeyUp = function _M3eNavMenuElement_handleKeyUp(e) {
-    const item = this[selectionManager].activeItem;
-    if (e.defaultPrevented || !item || item.disabled)
-        return;
-    switch (e.key) {
-        case "Enter":
-        case " ":
-            item.ripple?.hide();
-            break;
-    }
+_M3eNavMenuItemElement_handleIconSlotChange = function _M3eNavMenuItemElement_handleIconSlotChange(e) {
+    this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
 };
-_M3eNavMenuElement_handlePointerDown = function _M3eNavMenuElement_handlePointerDown(e) {
-    if (!e.defaultPrevented && !__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocusVisible, "f")) {
-        __classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocusVisible, true, "f");
-        if (this[selectionManager].activeItem) {
-            __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, this[selectionManager].activeItem, true, false);
-        }
-    }
+_M3eNavMenuItemElement_handleSlotChange = function _M3eNavMenuItemElement_handleSlotChange(e) {
+    __classPrivateFieldSet(this, _M3eNavMenuItemElement_link, e.target.assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??
+        null, "f");
+    __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.setAttribute("tabindex", "-1");
 };
-_M3eNavMenuElement_activateItem = function _M3eNavMenuElement_activateItem(item) {
-    this.setAttribute("aria-activedescendant", item.id);
-    if (item.label) {
-        scrollIntoViewIfNeeded(item.label, this, { block: "nearest", behavior: "smooth" });
+_M3eNavMenuItemElement_handleItemSlotChange = function _M3eNavMenuItemElement_handleItemSlotChange(e) {
+    __classPrivateFieldSet(this, _M3eNavMenuItemElement_items, e.target
+        .assignedElements({ flatten: true })
+        .filter((x) => x instanceof M3eNavMenuItemElement_1), "f");
+    const hadChildItems = this._hasChildItems;
+    this._hasChildItems = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").length > 0;
+    this.classList.toggle("-has-items", this._hasChildItems);
+    if (hadChildItems || this._hasChildItems) {
+        this.selected = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").some((x) => x.selected);
     }
-    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
-};
-_M3eNavMenuElement_updateFocusVisible = function _M3eNavMenuElement_updateFocusVisible() {
-    const focused = this.matches(":focus") || this.matches(":focus-within");
-    const focusVisible = !__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocusVisible, "f") && this.matches(":focus-visible");
-    this[selectionManager].items.forEach((x) => {
-        const active = x === this[selectionManager].activeItem;
-        __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, x, active && focused, active && focusVisible);
-    });
 };
-_M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateItemFocusVisible(item, focused, focusVisible) {
-    if (focused) {
-        item.stateLayer?.show("focused");
-    }
-    else {
-        item.stateLayer?.hide("focused");
-    }
-    if (focusVisible) {
-        item.focusRing?.show();
+_M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick() {
+    if (this.disabled)
+        return;
+    __classPrivateFieldGet(this, _M3eNavMenuItemElement_menu, "f")?.[selectionManager].setActiveItem(this);
+    if (!this._hasChildItems) {
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_menu, "f")?.[selectionManager].select(this);
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").forEach((x) => (x.selected = this.selected));
+        __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.click();
+        const drawerContainer = this.closest("m3e-drawer-container");
+        if (drawerContainer) {
+            const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end')");
+            if (drawer &&
+                (drawerContainer.classList.contains(`-${drawer.slot}-push`) ||
+                    drawerContainer.classList.contains(`-${drawer.slot}-over`))) {
+                setTimeout(() => drawerContainer.removeAttribute(drawer.slot), 300);
+            }
+        }
     }
     else {
-        item.focusRing?.hide();
+        this.toggle();
     }
 };
+_M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_handleCollapsibleEvent(e) {
+    e.stopPropagation();
+    this.dispatchEvent(new Event(e.type, { bubbles: true }));
+};
 /** The styles of the element. */
-M3eNavMenuElement.styles = css `
+M3eNavMenuItemElement.styles = css `
     :host {
-      display: flex;
-      flex-direction: column;
+      display: block;
+      flex: none;
       outline: none;
-      overflow-y: auto;
-      overflow-x: hidden;
       position: relative;
-      min-height: 0;
-      padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);
-      padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);
-      padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);
-      padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);
-      scrollbar-width: ${DesignToken.scrollbar.width};
-      scrollbar-color: ${DesignToken.scrollbar.color};
+      font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
+      font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
+      line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
+      letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});
     }
-    ::slotted(m3e-divider) {
-      margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);
+    .base {
+      display: flex;
+      align-items: center;
+      position: relative;
+      padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);
+      height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});
+      column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);
+      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
     }
-  `;
-/** @private */ M3eNavMenuElement.__nextId = 0;
-M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([
-    t$2("m3e-nav-menu")
-], M3eNavMenuElement);
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.1");
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E;
-
-var _M3eNavMenuItemElement_instances, _M3eNavMenuItemElement_items, _M3eNavMenuItemElement_menu, _M3eNavMenuItemElement_path, _M3eNavMenuItemElement_link, _M3eNavMenuItemElement_renderIcon, _M3eNavMenuItemElement_handleIconSlotChange, _M3eNavMenuItemElement_handleSlotChange, _M3eNavMenuItemElement_handleItemSlotChange, _M3eNavMenuItemElement_handleClick, _M3eNavMenuItemElement_handleCollapsibleEvent;
-var M3eNavMenuItemElement_1;
-/**
- * An expandable item in a navigation menu.
- *
- * @description
- * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
- * It supports nested child items, selection, disabled and indeterminate states, and emits events for
- * open/close transitions. The component is highly customizable via slots and CSS custom properties, and
- * is designed for accessible, keyboard-navigable menu structures.
+    .base,
+    .focus-ring {
+      border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});
+    }
+    .label {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+      vertical-align: middle;
+    }
+    .icon,
+    .toggle {
+      flex: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      vertical-align: middle;
+    }
+    ::slotted([slot="badge"]) {
+      flex: none;
+      position: relative;
+      font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
+      font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
+      line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
+      letter-spacing: var(--m3e-nav-menu-badge-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});
+    }
+    .toggle {
+      transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+        ${DesignToken.motion.easing.standard}`)};
+    }
+    :host(:not(.-with-icon)) .icon {
+      display: none;
+    }
+    .icon {
+      margin-inline-start: -0.5rem;
+    }
+    .toggle {
+      margin-inline-end: -0.5rem;
+    }
+    .group {
+      padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);
+    }
+    :host([open]) .toggle {
+      transform: rotate(180deg);
+    }
+    :host(:not(.-has-items)) .toggle,
+    :host(:not(.-has-items)) .group {
+      display: none;
+    }
+    ::slotted([slot="selected-icon"]),
+    ::slotted([slot="icon"]),
+    ::slotted([slot="toggle-icon"]),
+    .toggle-icon {
+      vertical-align: middle;
+      width: 1em;
+      height: 1em;
+      font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);
+    }
+    :host(:not(:disabled)) .base {
+      cursor: pointer;
+    }
+    :host(:not(:disabled)) .base {
+      color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});
+    }
+    :host(:disabled) .base {
+      color: color-mix(
+        in srgb,
+        var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})
+          var(--m3e-nav-menu-item-disabled-color-opacity, 38%),
+        transparent
+      );
+    }
+    :host([selected]:not(.-has-items):not(:disabled)) .base {
+      color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});
+      background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});
+      --m3e-state-layer-focus-color: var(
+        --m3e-nav-menu-item-selected-container-focus-color,
+        ${DesignToken.color.onSecondaryContainer}
+      );
+      --m3e-state-layer-hover-color: var(
+        --m3e-nav-menu-item-selected-container-hover-color,
+        ${DesignToken.color.onSecondaryContainer}
+      );
+      --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});
+    }
+    :host(:not([selected]):not(.-has-items):not(:disabled)) .base {
+      --m3e-state-layer-focus-color: var(
+        --m3e-nav-menu-item-unselected-container-focus-color,
+        ${DesignToken.color.onSurface}
+      );
+      --m3e-state-layer-hover-color: var(
+        --m3e-nav-menu-item-unselected-container-hover-color,
+        ${DesignToken.color.onSurface}
+      );
+      --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});
+    }
+    .state-layer {
+      margin-inline: auto;
+    }
+    :host([selected].-has-items:not(:disabled)) .base {
+      background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});
+      --m3e-state-layer-focus-color: var(
+        --m3e-nav-menu-item-open-container-focus-color,
+        ${DesignToken.color.onSurface}
+      );
+      --m3e-state-layer-hover-color: var(
+        --m3e-nav-menu-item-open-container-hover-color,
+        ${DesignToken.color.onSurface}
+      );
+      --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});
+    }
+    ::slotted(a[slot="label"]) {
+      all: unset;
+    }
+    ::slotted(m3e-divider) {
+      margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);
+    }
+    ::slotted(m3e-nav-menu-item:first-of-type) {
+      margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);
+    }
+    ::slotted(m3e-nav-menu-item:last-of-type) {
+      margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);
+    }
+    @media (prefers-reduced-motion) {
+      .base,
+      .toggle,
+      .state-layer {
+        transition: none !important;
+      }
+    }
+    @media (forced-colors: active) {
+      .base,
+      .state-layer {
+        transition: none !important;
+      }
+
+      :host(:disabled) .base {
+        color: GrayText;
+      }
+      :host(:not([selected]):not(:disabled)) .base {
+        color: ButtonText;
+      }
+      :host([selected]:not(.-has-items):not(:disabled)) .base {
+        forced-color-adjust: none;
+        color: ButtonFace;
+        background-color: ButtonText;
+      }
+      :host([selected].-has-items:not(:disabled)) .base {
+        background-color: unset;
+        color: ButtonText;
+      }
+    }
+  `;
+__decorate([
+    e$1(".state-layer")
+], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
+__decorate([
+    e$1(".focus-ring")
+], M3eNavMenuItemElement.prototype, "focusRing", void 0);
+__decorate([
+    e$1(".ripple")
+], M3eNavMenuItemElement.prototype, "ripple", void 0);
+__decorate([
+    e$1(".base")
+], M3eNavMenuItemElement.prototype, "_base", void 0);
+__decorate([
+    r$1()
+], M3eNavMenuItemElement.prototype, "_hasChildItems", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eNavMenuItemElement.prototype, "open", void 0);
+M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([
+    t$2("m3e-nav-menu-item")
+], M3eNavMenuItemElement);
+
+var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
+var M3eNavMenuElement_1;
+/**
+ * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.
+ *
+ * @description
+ * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting
+ * nested expandable items, keyboard navigation, and focus management. It is highly customizable
+ * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,
+ * and complex menu structures.
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
  *
  * @example
- * The following example illustrates a multilevel navigation menu.
+ * The next example illustrates a multilevel navigation menu.
  * ```html
  * <m3e-nav-menu>
  *   <m3e-nav-menu-item open>
@@ -442,460 +698,388 @@ var M3eNavMenuItemElement_1;
  * </m3e-nav-menu>
  * ```
  *
- * @tag m3e-nav-menu-item
- *
- * @slot - Renders the nested child items.
- * @slot label - Renders the label of the item.
- * @slot icon - Renders the icon of the item.
- * @slot selected-icon - Renders the icon of the item when selected.
- * @slot toggle-icon - Renders the toggle icon.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr indeterminate - Whether the element's selected / checked state is indeterminate.
- * @attr open - Whether the item is expanded.
- * @attr selected - Whether the item is selected.
+ * @tag m3e-nav-menu
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
- * @fires click - Emitted when the element is clicked.
+ * @slot - Renders the items of the menu.
  *
- * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.
- * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
- * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.
- * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.
- * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.
- * @cssprop --m3e-nav-menu-item-height - Height of the item.
- * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.
- * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.
- * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.
- * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.
- * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.
- * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.
- * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.
- * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.
- * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.
- * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.
- * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.
- * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.
- * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.
- * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.
- * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.
- * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.
- * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.
- * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.
- * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.
- * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.
- * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.
- * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.
- * @cssprop --m3e-nav-menu-badge-item-tracking - Letter spacing for badge slot.
- * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.
- * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.
- */
-let M3eNavMenuItemElement = M3eNavMenuItemElement_1 = class M3eNavMenuItemElement extends Selected(Disabled(EventAttribute(AttachInternals(Role(LitElement, "treeitem"), true), "opening", "opened", "closing", "closed"))) {
+ * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.
+ * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.
+ * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.
+ */
+let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Role(LitElement, "tree") {
     constructor() {
-        super(...arguments);
-        _M3eNavMenuItemElement_instances.add(this);
-        /** @private */ this._hasChildItems = false;
-        /** @private */ _M3eNavMenuItemElement_items.set(this, []);
-        /** @private */ _M3eNavMenuItemElement_menu.set(this, null);
-        /** @private */ _M3eNavMenuItemElement_path.set(this, new Array());
-        /** @private */ _M3eNavMenuItemElement_link.set(this, null);
-        /**
-         * Whether the item is expanded.
-         * @default false
-         */
-        this.open = false;
-    }
-    /** A reference to the nested `HTMLAnchorElement`. */
-    get link() {
-        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f");
-    }
-    /** A reference to the element used to present the label of the item. */
-    get label() {
-        return this._base ?? null;
-    }
-    /** Whether the item is visible. */
-    get visible() {
-        return !__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").some((x) => !x.open);
-    }
-    /** The full path of the item, starting with the top-most ancestor, including this item. */
-    get path() {
-        return [...__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f"), this];
-    }
-    /** Whether the item has child items. */
-    get hasChildItems() {
-        return this._hasChildItems;
-    }
-    /** The parenting item. */
-    get parentItem() {
-        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f")[__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length - 1] ?? null;
+        super();
+        _M3eNavMenuElement_instances.add(this);
+        /** @private */ _M3eNavMenuElement_ignoreFocusVisible.set(this, false);
+        /** @private */ _M3eNavMenuElement_ignoreFocus.set(this, false);
+        /** @private */
+        this[_b] = new SelectionManager()
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withTypeahead()
+            .withSkipPredicate((x) => x.disabled || !x.visible)
+            .disableRovingTabIndex()
+            .onActiveItemChange(() => {
+            if (this[selectionManager].activeItem) {
+                __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_activateItem).call(this, this[selectionManager].activeItem);
+            }
+        })
+            .onSelectedItemsChange(() => {
+            const selected = this.selected;
+            for (const item of this.items) {
+                if (item !== selected) {
+                    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, item, false, false);
+                }
+            }
+            if (selected?.label) {
+                scrollIntoViewIfNeeded(selected.label, this, { block: "start", behavior: "smooth" });
+            }
+        });
+        /** @private */ _M3eNavMenuElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyDown).call(this, e));
+        /** @private */ _M3eNavMenuElement_keyUpHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyUp).call(this, e));
+        /** @private */ _M3eNavMenuElement_pointerDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handlePointerDown).call(this, e));
+        new PressedController(this, { callback: (pressed) => (__classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocus, pressed, "f")) });
+        new FocusController(this, {
+            callback: () => {
+                if (!__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocus, "f")) {
+                    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
+                }
+            },
+        });
     }
-    /** The items that immediately descend from this item. */
-    get childItems() {
-        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f");
+    /** The selected item of the menu. */
+    get selected() {
+        return this[selectionManager].selectedItems[0] ?? null;
     }
-    /** The one-based level of the item. */
-    get level() {
-        return __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length + 1;
+    /** All the items of the menu. */
+    get items() {
+        return this[selectionManager].items;
     }
     /**
-     * Expands this item, and optionally, all descendants.
-     * @param {boolean} [descendants=false] Whether to expand all descendants.
+     * Expands the specified items, or all items if no items are provided.
+     * @param {M3eNavMenuItemElement | undefined} items The items to expand.
      */
-    expand(descendants = false) {
-        if (this.hasChildItems) {
-            this.open = true;
-            if (descendants) {
-                this.childItems.forEach((x) => x.expand(true));
-            }
-        }
+    expand(items) {
+        (items ?? this[selectionManager].items).forEach((x) => x.expand());
     }
     /**
-     * Collapses this item, and optionally, all descendants.
-     * @param {boolean} [descendants=false] Whether to expand all descendants.
+     * Collapses the specified items, or all items if no items are provided.
+     * @param {M3eNavMenuItemElement | undefined} items The items to collapse.
      */
-    collapse(descendants = false) {
-        if (this.hasChildItems) {
-            this.open = false;
-            if (descendants) {
-                this.childItems.forEach((x) => x.collapse(true));
+    collapse(items) {
+        (items ?? this[selectionManager].items).forEach((x) => x.collapse());
+        const activeItem = this[selectionManager].activeItem;
+        if (activeItem && !activeItem.visible) {
+            for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {
+                if (parent.visible) {
+                    this[selectionManager].setActiveItem(parent);
+                    break;
+                }
             }
         }
     }
-    /** Toggles the expanded state of the item. */
-    toggle() {
-        if (this.hasChildItems) {
-            this.open = !this.open;
-        }
-    }
     /** @inheritdoc */
     connectedCallback() {
         super.connectedCallback();
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length = 0;
-        for (let item = this.parentElement?.closest("m3e-nav-menu-item"); item; item = item.parentElement?.closest("m3e-nav-menu-item")) {
-            __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").push(item);
-        }
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").reverse();
-        this.style.setProperty("--_nav-menu-item-level", `${this.level}`);
-        __classPrivateFieldSet(this, _M3eNavMenuItemElement_menu, this.closest("m3e-nav-menu"), "f");
+        this.setAttribute("tabindex", "0");
+        this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eNavMenuElement_keyDownHandler, "f"));
+        this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eNavMenuElement_keyUpHandler, "f"));
+        this.addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eNavMenuElement_pointerDownHandler, "f"));
     }
     /** @inheritdoc */
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").length = 0;
-    }
-    /** @inheritdoc */
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has("selected")) {
-            this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;
-            for (const icon of this.querySelectorAll(":scope > m3e-icon[slot]")) {
-                icon.toggleAttribute("filled", this.selected);
-            }
-            __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").forEach((x) => (x.selected = this.selected));
-            if (this.selected && !this.hasChildItems) {
-                this.closest("m3e-nav-menu")?.[selectionManager].notifySelectionChange(this);
-            }
-        }
-    }
-    /** @inheritdoc */
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        const base = this._base;
-        if (base) {
-            [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));
-        }
+        this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eNavMenuElement_keyDownHandler, "f"));
+        this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eNavMenuElement_keyUpHandler, "f"));
+        this.removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eNavMenuElement_pointerDownHandler, "f"));
     }
     /** @inheritdoc */
     render() {
-        return html `<div class="base" @click="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleClick)}">
-        <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" centered ?disabled="${this.disabled}"></m3e-ripple>
-        <div class="icon">${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_renderIcon).call(this)}</div>
-        <div class="label">
-          <slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleSlotChange)}"></slot>
-        </div>
-        <slot name="badge"></slot>
-        <div aria-hidden="true" class="toggle">
-          <slot name="toggle-icon">
-            <svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor">
-              <path d="M480-360 280-560h400L480-360Z" />
-            </svg>
-          </slot>
-        </div>
-      </div>
-      <m3e-collapsible
-        class="group"
-        role="group"
-        aria-hidden="${o(this._hasChildItems ? undefined : "true")}"
-        ?open="${this._hasChildItems && this.open}"
-        @opening="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
-        @opened="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
-        @closing="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
-        @closed="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleCollapsibleEvent)}"
-      >
-        <slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleItemSlotChange)}"></slot>
-      </m3e-collapsible>`;
+        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleSlotChange)}"></slot>`;
     }
 };
-_M3eNavMenuItemElement_items = new WeakMap();
-_M3eNavMenuItemElement_menu = new WeakMap();
-_M3eNavMenuItemElement_path = new WeakMap();
-_M3eNavMenuItemElement_link = new WeakMap();
-_M3eNavMenuItemElement_instances = new WeakSet();
-_M3eNavMenuItemElement_renderIcon = function _M3eNavMenuItemElement_renderIcon() {
-    const icon = html `<slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}"></slot>`;
-    return this.selected && !this.hasChildItems
-        ? html `<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}">${icon}</slot>`
-        : icon;
-};
-_M3eNavMenuItemElement_handleIconSlotChange = function _M3eNavMenuItemElement_handleIconSlotChange(e) {
-    this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
-};
-_M3eNavMenuItemElement_handleSlotChange = function _M3eNavMenuItemElement_handleSlotChange(e) {
-    __classPrivateFieldSet(this, _M3eNavMenuItemElement_link, e.target.assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??
-        null, "f");
-    __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.setAttribute("tabindex", "-1");
-};
-_M3eNavMenuItemElement_handleItemSlotChange = function _M3eNavMenuItemElement_handleItemSlotChange(e) {
-    __classPrivateFieldSet(this, _M3eNavMenuItemElement_items, e.target
-        .assignedElements({ flatten: true })
-        .filter((x) => x instanceof M3eNavMenuItemElement_1), "f");
-    const hadChildItems = this._hasChildItems;
-    this._hasChildItems = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").length > 0;
-    this.classList.toggle("-has-items", this._hasChildItems);
-    if (hadChildItems || this._hasChildItems) {
-        this.selected = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").some((x) => x.selected);
+_M3eNavMenuElement_ignoreFocusVisible = new WeakMap();
+_M3eNavMenuElement_ignoreFocus = new WeakMap();
+_M3eNavMenuElement_keyDownHandler = new WeakMap();
+_M3eNavMenuElement_keyUpHandler = new WeakMap();
+_M3eNavMenuElement_pointerDownHandler = new WeakMap();
+_M3eNavMenuElement_instances = new WeakSet();
+_b = selectionManager;
+_M3eNavMenuElement_handleSlotChange = function _M3eNavMenuElement_handleSlotChange() {
+    for (const divider of this.querySelectorAll("m3e-divider")) {
+        divider.ariaHidden = "true";
+    }
+    const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-nav-menu-item")]);
+    for (const item of added) {
+        item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement_1.__nextId++}`;
+    }
+    if (this[selectionManager].activeItem) {
+        this.setAttribute("aria-activedescendant", this[selectionManager].activeItem.id);
+        __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
+    }
+    else {
+        this.removeAttribute("aria-activedescendant");
     }
 };
-_M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick() {
-    if (this.disabled)
+_M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e) {
+    __classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocusVisible, false, "f");
+    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
+    const item = this[selectionManager].activeItem;
+    if (e.defaultPrevented || !item || item.disabled)
         return;
-    __classPrivateFieldGet(this, _M3eNavMenuItemElement_menu, "f")?.[selectionManager].setActiveItem(this);
-    if (!this._hasChildItems) {
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_menu, "f")?.[selectionManager].select(this);
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").forEach((x) => (x.selected = this.selected));
-        __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.click();
-        const drawerContainer = this.closest("m3e-drawer-container");
-        if (drawerContainer) {
-            const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end')");
-            if (drawer &&
-                (drawerContainer.classList.contains(`-${drawer.slot}-push`) ||
-                    drawerContainer.classList.contains(`-${drawer.slot}-over`))) {
-                setTimeout(() => drawerContainer.removeAttribute(drawer.slot), 300);
+    switch (e.key) {
+        case "Enter":
+        case " ":
+            e.preventDefault();
+            if (item.ripple && !item.ripple.visible) {
+                item.ripple.show(0, 0, true);
+            }
+            if (item.hasChildItems) {
+                item.toggle();
+            }
+            else if (!item.selected) {
+                this[selectionManager].select(item);
+                item.link?.click();
+            }
+            break;
+        case "*":
+            e.preventDefault();
+            item.expand(true);
+            break;
+        case "Left":
+        case "ArrowLeft":
+            e.preventDefault();
+            if (item.hasChildItems && item.open) {
+                item.collapse();
             }
+            else {
+                const parent = item.parentItem;
+                if (parent) {
+                    parent.collapse();
+                    this[selectionManager].setActiveItem(parent);
+                }
+            }
+            break;
+        case "Right":
+        case "ArrowRight":
+            if (item.hasChildItems) {
+                if (!item.open) {
+                    e.preventDefault();
+                    item.expand();
+                }
+                else {
+                    try {
+                        this[selectionManager].vertical = false;
+                        this[selectionManager].onKeyDown(e);
+                    }
+                    finally {
+                        this[selectionManager].vertical = true;
+                    }
+                }
+            }
+            else {
+                e.preventDefault();
+            }
+            break;
+        default:
+            this[selectionManager].onKeyDown(e);
+            break;
+    }
+};
+_M3eNavMenuElement_handleKeyUp = function _M3eNavMenuElement_handleKeyUp(e) {
+    const item = this[selectionManager].activeItem;
+    if (e.defaultPrevented || !item || item.disabled)
+        return;
+    switch (e.key) {
+        case "Enter":
+        case " ":
+            item.ripple?.hide();
+            break;
+    }
+};
+_M3eNavMenuElement_handlePointerDown = function _M3eNavMenuElement_handlePointerDown(e) {
+    if (!e.defaultPrevented && !__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocusVisible, "f")) {
+        __classPrivateFieldSet(this, _M3eNavMenuElement_ignoreFocusVisible, true, "f");
+        const item = e
+            .composedPath()
+            .reverse()
+            .find((x) => x instanceof M3eNavMenuItemElement);
+        if (item && !item.disabled) {
+            __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, item, true, false);
         }
     }
-    else {
-        this.toggle();
+};
+_M3eNavMenuElement_activateItem = function _M3eNavMenuElement_activateItem(item) {
+    this.setAttribute("aria-activedescendant", item.id);
+    if (item.label) {
+        scrollIntoViewIfNeeded(item.label, this, { block: "nearest", behavior: "smooth" });
     }
+    __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
 };
-_M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_handleCollapsibleEvent(e) {
-    e.stopPropagation();
-    this.dispatchEvent(new Event(e.type, { bubbles: true }));
+_M3eNavMenuElement_updateFocusVisible = function _M3eNavMenuElement_updateFocusVisible() {
+    const focused = this.matches(":focus") || this.matches(":focus-within");
+    const focusVisible = !__classPrivateFieldGet(this, _M3eNavMenuElement_ignoreFocusVisible, "f") && this.matches(":focus-visible");
+    this[selectionManager].items.forEach((x) => {
+        const active = x === this[selectionManager].activeItem;
+        __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, x, active && focused, active && focusVisible);
+    });
+};
+_M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateItemFocusVisible(item, focused, focusVisible) {
+    if (focused) {
+        item.stateLayer?.show("focused");
+    }
+    else {
+        item.stateLayer?.hide("focused");
+    }
+    if (focusVisible) {
+        item.focusRing?.show();
+    }
+    else {
+        item.focusRing?.hide();
+    }
 };
 /** The styles of the element. */
-M3eNavMenuItemElement.styles = css `
+M3eNavMenuElement.styles = css `
     :host {
-      display: block;
-      flex: none;
-      outline: none;
-      position: relative;
-      font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
-      font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
-      line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
-      letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});
-    }
-    .base {
-      display: flex;
-      align-items: center;
-      position: relative;
-      padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);
-      height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});
-      column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);
-      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
-    }
-    .base,
-    .focus-ring {
-      border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});
-    }
-    .label {
-      flex: 1 1 auto;
-      display: flex;
-      align-items: center;
-      position: relative;
-      overflow: hidden;
-      vertical-align: middle;
-    }
-    .icon,
-    .toggle {
-      flex: none;
       display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      vertical-align: middle;
-    }
-    ::slotted([slot="badge"]) {
-      flex: none;
+      flex-direction: column;
+      outline: none;
+      overflow-y: auto;
+      overflow-x: hidden;
       position: relative;
-      font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
-      font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
-      line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
-      letter-spacing: var(--m3e-nav-menu-badge-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});
-    }
-    .toggle {
-      transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)};
-    }
-    :host(:not(.-with-icon)) .icon {
-      display: none;
-    }
-    .icon {
-      margin-inline-start: -0.5rem;
-    }
-    .toggle {
-      margin-inline-end: -0.5rem;
-    }
-    .group {
-      padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);
-    }
-    :host([open]) .toggle {
-      transform: rotate(180deg);
-    }
-    :host(:not(.-has-items)) .toggle,
-    :host(:not(.-has-items)) .group {
-      display: none;
-    }
-    ::slotted([slot="selected-icon"]),
-    ::slotted([slot="icon"]),
-    ::slotted([slot="toggle-icon"]),
-    .toggle-icon {
-      vertical-align: middle;
-      width: 1em;
-      height: 1em;
-      font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);
-    }
-    :host(:not(:disabled)) .base {
-      cursor: pointer;
-    }
-    :host(:not(:disabled)) .base {
-      color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});
-    }
-    :host(:disabled) .base {
-      color: color-mix(
-        in srgb,
-        var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})
-          var(--m3e-nav-menu-item-disabled-color-opacity, 38%),
-        transparent
-      );
-    }
-    :host([selected]:not(.-has-items):not(:disabled)) .base {
-      color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});
-      background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});
-      --m3e-state-layer-focus-color: var(
-        --m3e-nav-menu-item-selected-container-focus-color,
-        ${DesignToken.color.onSecondaryContainer}
-      );
-      --m3e-state-layer-hover-color: var(
-        --m3e-nav-menu-item-selected-container-hover-color,
-        ${DesignToken.color.onSecondaryContainer}
-      );
-      --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});
-    }
-    :host(:not([selected]):not(.-has-items):not(:disabled)) .base {
-      --m3e-state-layer-focus-color: var(
-        --m3e-nav-menu-item-unselected-container-focus-color,
-        ${DesignToken.color.onSurface}
-      );
-      --m3e-state-layer-hover-color: var(
-        --m3e-nav-menu-item-unselected-container-hover-color,
-        ${DesignToken.color.onSurface}
-      );
-      --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});
-    }
-    .state-layer {
-      margin-inline: auto;
-    }
-    :host([selected].-has-items:not(:disabled)) .base {
-      background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});
-      --m3e-state-layer-focus-color: var(
-        --m3e-nav-menu-item-open-container-focus-color,
-        ${DesignToken.color.onSurface}
-      );
-      --m3e-state-layer-hover-color: var(
-        --m3e-nav-menu-item-open-container-hover-color,
-        ${DesignToken.color.onSurface}
-      );
-      --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});
-    }
-    ::slotted(a[slot="label"]) {
-      all: unset;
+      min-height: 0;
+      padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);
+      padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);
+      padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);
+      padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);
+      scrollbar-width: ${DesignToken.scrollbar.width};
+      scrollbar-color: ${DesignToken.scrollbar.color};
     }
     ::slotted(m3e-divider) {
       margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);
+      flex: none;
     }
-    ::slotted(m3e-nav-menu-item:first-of-type) {
-      margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);
+  `;
+/** @private */ M3eNavMenuElement.__nextId = 0;
+M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([
+    t$2("m3e-nav-menu")
+], M3eNavMenuElement);
+
+var _M3eNavMenuItemGroupElement_instances, _M3eNavMenuItemGroupElement_labelId, _M3eNavMenuItemGroupElement_label, _M3eNavMenuItemGroupElement_handleLabelSlotChange;
+var M3eNavMenuItemGroupElement_1;
+/**
+ * A top-level semantic grouping of items in a navigation menu.
+ *
+ * @description
+ * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.
+ * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @tag m3e-nav-menu-item-group
+ *
+ * @slot - Renders the items of the group.
+ * @slot label - Renders the label of the group.
+ *
+ * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.
+ * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.
+ */
+let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenuItemGroupElement extends Role(LitElement, "group") {
+    constructor() {
+        super(...arguments);
+        _M3eNavMenuItemGroupElement_instances.add(this);
+        /** @private */ _M3eNavMenuItemGroupElement_labelId.set(this, `m3e-nav-menu-item-group-label-${M3eNavMenuItemGroupElement_1.__nextId++}`);
+        /** @private */ _M3eNavMenuItemGroupElement_label.set(this, void 0);
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.toggle("-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.classList.remove("-divided");
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_instances, "m", _M3eNavMenuItemGroupElement_handleLabelSlotChange)}"></slot><slot></slot>`;
+    }
+};
+_M3eNavMenuItemGroupElement_labelId = new WeakMap();
+_M3eNavMenuItemGroupElement_label = new WeakMap();
+_M3eNavMenuItemGroupElement_instances = new WeakSet();
+_M3eNavMenuItemGroupElement_handleLabelSlotChange = function _M3eNavMenuItemGroupElement_handleLabelSlotChange(e) {
+    const label = e.target.assignedElements({ flatten: true })[0];
+    if (label !== __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f")) {
+        // If the label is changed and its id matched the reversed id,
+        // clear the id in the event the element is moved elsewhere in the DOM.
+        if (__classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f")?.id === __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_labelId, "f")) {
+            __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f").id = "";
+        }
+        __classPrivateFieldSet(this, _M3eNavMenuItemGroupElement_label, label, "f");
+        if (__classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f")) {
+            __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f").role = "none";
+            __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f").id = __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f").id || __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_labelId, "f");
+            this.setAttribute("aria-labelledby", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f").id);
+        }
+        else {
+            this.removeAttribute("aria-labelledby");
+        }
+    }
+};
+/** The styles of the element. */
+M3eNavMenuItemGroupElement.styles = css `
+    :host {
+      display: contents;
     }
-    ::slotted(m3e-nav-menu-item:last-of-type) {
-      margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);
+    ::slotted([slot="label"]) {
+      margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem);
+      margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem);
+      flex: none;
     }
-    @media (prefers-reduced-motion) {
-      .base,
-      .toggle,
-      .state-layer {
-        transition: none !important;
-      }
+    :host(.-divided) ::slotted([slot="label"]) {
+      margin-block-start: calc(
+        var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem)
+      );
     }
-    @media (forced-colors: active) {
-      .base,
-      .state-layer {
-        transition: none !important;
-      }
-
-      :host(:disabled) .base {
-        color: GrayText;
-      }
-      :host(:not([selected]):not(:disabled)) .base {
-        color: ButtonText;
-      }
-      :host([selected]:not(.-has-items):not(:disabled)) .base {
-        forced-color-adjust: none;
-        color: ButtonFace;
-        background-color: ButtonText;
-      }
-      :host([selected].-has-items:not(:disabled)) .base {
-        background-color: unset;
-        color: ButtonText;
-      }
+    :host(:not(.-divided)) ::slotted([slot="label"]) {
+      margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem);
     }
   `;
-__decorate([
-    e$1(".state-layer")
-], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
-__decorate([
-    e$1(".focus-ring")
-], M3eNavMenuItemElement.prototype, "focusRing", void 0);
-__decorate([
-    e$1(".ripple")
-], M3eNavMenuItemElement.prototype, "ripple", void 0);
-__decorate([
-    e$1(".base")
-], M3eNavMenuItemElement.prototype, "_base", void 0);
-__decorate([
-    r$1()
-], M3eNavMenuItemElement.prototype, "_hasChildItems", void 0);
-__decorate([
-    n$1({ type: Boolean, reflect: true })
-], M3eNavMenuItemElement.prototype, "open", void 0);
-M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([
-    t$2("m3e-nav-menu-item")
-], M3eNavMenuItemElement);
+/** @private */ M3eNavMenuItemGroupElement.__nextId = 0;
+M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([
+    t$2("m3e-nav-menu-item-group")
+], M3eNavMenuItemGroupElement);
 
-export { M3eNavMenuElement, M3eNavMenuItemElement };
+export { M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement };
 //# sourceMappingURL=index.js.map