@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/menu/index.cjs

@@ -15,13 +15,778 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../base-CBCg3yyw.cjs"),f=require("../query-BL-TJj7K.cjs"),z=require("../sized-mixin-CPxE5C96.cjs"),y=require("../divider.module-DDvBo9zo.cjs"),S=require("../state-D8JEtYqe.cjs"),E=require("../query-assigned-nodes-BcKWmGzy.cjs"),k=require("../random-id-CqvckpWe.cjs"),M=require("../mutation-controller-DkOMCW-c.cjs"),A=require("../focusable-EbipgXRh.cjs"),C=require("../like-anchor-sod1C1fR.cjs"),P=require("../observe-slot-presence-bc9chhsi.cjs"),D=require("../observe-slot-text-Ceb7SvYT.cjs"),R=require("../dependency-manger-C5HCkMMB.cjs"),d=require("../luzmo-icons-D47EGj-3.cjs"),O=require("../slottable-request-event-BfUUt1Mh.cjs"),L=":host{--menu-item-top-to-action: var(--luzmo-spacing-1);--menu-item-top-to-checkbox: var(--luzmo-spacing-1);--menu-item-label-line-height: var(--luzmo-line-height);--menu-item-label-line-height-cjk: 1.5;--menu-item-label-to-description-spacing: 1px;--menu-item-focus-indicator-width: var(--luzmo-indicator-width);--menu-item-focus-indicator-color: var(--luzmo-indicator-color);--menu-item-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--menu-item-label-content-color-default: var(--luzmo-font-color);--menu-item-label-content-color-hover: var(--luzmo-font-color-hover);--menu-item-label-content-color-down: var(--luzmo-font-color-down);--menu-item-label-content-color-focus: var(--luzmo-font-color-focus);--menu-item-highlight-label-background-color: var(--luzmo-primary);--menu-item-highlight-label-content-color: var(--luzmo-font-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-font-color-hover );--menu-item-highlight-label-content-color-down: var(--luzmo-font-color-down);--menu-item-highlight-label-content-color-focus: var( --luzmo-font-color-focus );--menu-item-label-icon-color-default: var(--luzmo-font-color);--menu-item-label-icon-color-hover: var(--luzmo-font-color-hover);--menu-item-label-icon-color-down: var(--luzmo-font-color-down);--menu-item-label-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-label-content-color-disabled: var(--luzmo-font-color-disabled);--menu-item-label-icon-color-disabled: var(--luzmo-font-color-disabled);--menu-item-description-line-height: var(--luzmo-line-height);--menu-item-description-line-height-cjk: 1.5;--menu-item-description-color-default: var(--luzmo-font-color);--menu-item-description-color-hover: var(--luzmo-font-color-hover);--menu-item-description-color-down: var(--luzmo-font-color-down);--menu-item-description-color-focus: var(--luzmo-font-color-focus);--menu-item-description-color-disabled: var(--luzmo-disabled-color);--menu-section-header-line-height: var(--luzmo-line-height);--menu-section-header-line-height-cjk: 1.5;--menu-section-header-font-weight: bold;--menu-section-header-color: var(--luzmo-font-color-hard);--menu-collapsible-icon-color: var(--luzmo-font-color-hard);--menu-checkmark-icon-color-default: var(--luzmo-primary);--menu-checkmark-icon-color-hover: var(--luzmo-primary-hover);--menu-checkmark-icon-color-down: var(--luzmo-primary-down);--menu-checkmark-icon-color-focus: var(--luzmo-primary-focus);--menu-drillin-icon-color-default: var(--luzmo-font-color);--menu-drillin-icon-color-hover: var(--luzmo-font-color-hover);--menu-drillin-icon-color-down: var(--luzmo-font-color-down);--menu-drillin-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-value-color-default: var(--luzmo-font-color);--menu-item-value-color-hover: var(--luzmo-font-color-hover);--menu-item-value-color-down: var(--luzmo-font-color-down);--menu-item-value-color-focus: var(--luzmo-font-color-focus);--menu-checkmark-display-hidden: none;--menu-checkmark-display-shown: block;--menu-checkmark-display: block;--menu-item-collapsible-no-icon-submenu-item-padding-x-start: 28px;--menu-item-background-color-selected: var(--luzmo-background-color);--menu-item-background-color-default: var(--luzmo-background-color);--menu-item-background-color-hover: var(--luzmo-background-color-hover);--menu-item-background-color-down: var(--luzmo-background-color-down);--menu-item-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--menu-item-min-height: var(--luzmo-component-height);--menu-item-icon-height: var(--luzmo-font-size);--menu-item-icon-width: var(--luzmo-font-size);--menu-item-label-font-size: var(--luzmo-font-size);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size);--menu-section-header-min-width: var(--luzmo-component-height);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--menu-item-min-height: var(--luzmo-component-height-s);--menu-item-icon-height: var(--luzmo-font-size-s);--menu-item-icon-width: var(--luzmo-font-size-s);--menu-item-label-font-size: var(--luzmo-font-size-s);--menu-item-label-text-to-visual: var(--luzmo-spacing-3);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-3);--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: var(--luzmo-spacing-2);--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size-s);--menu-section-header-min-width: var(--luzmo-component-height-s);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size-s);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-3);--menu-back-icon-margin: var(--luzmo-spacing-3)}:host([size=l]){--menu-item-min-height: var(--luzmo-component-height-l);--menu-item-icon-height: var(--luzmo-font-size-l);--menu-item-icon-width: var(--luzmo-font-size-l);--menu-item-label-font-size: var(--luzmo-font-size-l);--menu-item-label-text-to-visual: var(--luzmo-spacing-4);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-4);--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-3);--menu-item-description-font-size: var(--luzmo-font-size-s);--menu-section-header-font-size: var(--luzmo-font-size-l);--menu-section-header-min-width: var(--luzmo-component-height-l);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--menu-item-checkmark-size: var(--luzmo-font-size-s);--menu-item-angle-size: var(--luzmo-font-size-l);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-4);--menu-back-icon-margin: var(--luzmo-spacing-4)}:host([size=xl]){--menu-item-min-height: var(--luzmo-component-height-xl);--menu-item-icon-height: var(--luzmo-font-size-xl);--menu-item-icon-width: var(--luzmo-font-size-xl);--menu-item-label-font-size: var(--luzmo-font-size-xl);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-4);--menu-item-description-font-size: var(--luzmo-font-size);--menu-section-header-font-size: var(--luzmo-font-size-xl);--menu-section-header-min-width: var(--luzmo-component-height-xl);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size);--menu-item-angle-size: var(--luzmo-font-size-xl);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([variant=highlight]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);--menu-item-highlight-label-content-color-hover: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-down: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-focus: var( --luzmo-primary-inverse-color )}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}@media (forced-colors: active){:host{--highcontrast-menu-item-background-color-default: ButtonFace;--highcontrast-menu-item-color-default: ButtonText;--highcontrast-menu-item-background-color-focus: Highlight;--highcontrast-menu-item-color-focus: HighlightText;--highcontrast-menu-checkmark-icon-color-default: Highlight;--highcontrast-menu-item-color-disabled: GrayText;--highcontrast-menu-item-focus-indicator-color: Highlight;--highcontrast-menu-item-selected-background-color: Highlight;--highcontrast-menu-item-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-menu-item-selected-background-color: SelectedItem;--highcontrast-menu-item-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-menu-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--menu-item-label-line-height: var( --luzmo-menu-item-label-line-height-cjk, var(--menu-item-label-line-height-cjk) );--menu-item-description-line-height: var( --luzmo-menu-item-description-line-height-cjk, var(--menu-item-description-line-height-cjk) );--menu-section-header-line-height: var( --luzmo-menu-section-header-line-height-cjk, var(--menu-section-header-line-height-cjk) )}:host([selects]) ::slotted(luzmo-menu-item){--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-selectable-edge-to-text-not-selected, var(--menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(luzmo-menu-item[selected]){--menu-checkmark-display: var(--menu-checkmark-display-shown);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content))}.luzmo-Menu-backIcon{margin-block:var(--luzmo-menu-back-icon-margin-block, var(--menu-back-icon-margin));margin-inline:var(--luzmo-menu-back-icon-margin-inline, var(--menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .luzmo-Menu-sectionHeading{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc((var(--luzmo-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";var T=Object.defineProperty,U=Object.getOwnPropertyDescriptor,m=(r,e,t,o)=>{for(var i=o>1?void 0:o?U(e,t):e,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=(o?a(e,t,i):a(i))||i);return o&&i&&T(e,t,i),i};function $(r,e){return!!e&&(r===e||r.contains(e))}class u extends z.SizedMixin(l.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.ignore=!1,this.value="",this.valueSeparator=",",this.selectedItems=[],this.focusedItemIndex=0,this.focusInItemIndex=0,this._selected=[],this.cacheUpdated=Promise.resolve(),this.childItemSet=new Set,this.selectedItemsMap=new Map,this._hasUpdatedSelectedItemIndex=!1,this._willUpdateItems=!1,this.pointerUpTarget=null,this.descendentOverlays=new Map,this.handleSubmenuClosed=e=>{e.stopPropagation(),e.composedPath()[0].dispatchEvent(new Event("luzmo-menu-submenu-closed",{bubbles:!0,composed:!0}))},this.handleSubmenuOpened=e=>{e.stopPropagation(),e.composedPath()[0].dispatchEvent(new Event("luzmo-menu-submenu-opened",{bubbles:!0,composed:!0}));const o=this.childItems[this.focusedItemIndex];o&&(o.focused=!1);const i=e.composedPath().find(a=>this.childItemSet.has(a));if(!i)return;const n=this.childItems.indexOf(i);this.focusedItemIndex=n,this.focusInItemIndex=n},this.resolveCacheUpdated=()=>{},this.addEventListener("luzmo-menu-item-added-or-updated",this.onSelectableItemAddedOrUpdated),this.addEventListener("luzmo-menu-item-added-or-updated",this.onFocusableItemAddedOrUpdated,{capture:!0}),this.addEventListener("click",this.handleClick),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur),this.addEventListener("luzmo-opened",this.handleSubmenuOpened),this.addEventListener("luzmo-closed",this.handleSubmenuClosed)}static get styles(){return[l.r(L)]}get isSubmenu(){return this.slot==="submenu"}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.selectedItems=[],this.selectedItemsMap.clear(),this.childItems.forEach(o=>{this===o.menuData.selectionRoot&&(o.selected=this.selected.includes(o.value),o.selected&&(this.selectedItems.push(o),this.selectedItemsMap.set(o,!0)))}),this.requestUpdate("selected",t)}get childItems(){return this.cachedChildItems||(this.cachedChildItems=this.updateCachedMenuItems()),this.cachedChildItems}get childRole(){if(this.resolvedRole==="listbox")return"option";switch(this.resolvedSelects){case"single":return"menuitemradio";case"multiple":return"menuitemcheckbox";default:return"menuitem"}}get ownRole(){return"menu"}focus({preventScroll:e}={}){if(this.childItems.every(o=>o.disabled))return;if(this.childItems.some(o=>o.menuData.focusRoot!==this)){super.focus({preventScroll:e});return}this.focusMenuItemByOffset(0),super.focus({preventScroll:e});const t=this.selectedItems[0];t&&!e&&t.scrollIntoView({block:"nearest"})}handleFocusin(e){var i;if(this.childItems.some(n=>n.menuData.focusRoot!==this))return;const t=this.getRootNode().activeElement,o=((i=this.childItems[this.focusedItemIndex])==null?void 0:i.menuData.selectionRoot)||this;if((t!==o||e.target!==this)&&(o.focus({preventScroll:!0}),t&&this.focusedItemIndex===0)){const n=this.childItems.indexOf(t);this.focusMenuItemByOffset(Math.max(n,0))}this.startListeningToKeyboard()}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}handleBlur(e){$(this,e.relatedTarget)||(this.stopListeningToKeyboard(),this.childItems.forEach(t=>t.focused=!1),this.removeAttribute("aria-activedescendant"))}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}selectOrToggleItem(e){const t=this.resolvedSelects,o=new Map(this.selectedItemsMap),i=[...this.selected],n=[...this.selectedItems],a=this.value,h=this.childItems[this.focusedItemIndex];if(h&&(h.focused=!1,h.active=!1),this.focusedItemIndex=this.childItems.indexOf(e),this.forwardFocusVisibleToItem(e),t==="multiple"){this.selectedItemsMap.has(e)?this.selectedItemsMap.delete(e):this.selectedItemsMap.set(e,!0);const v=[],b=[];this.childItemSet.forEach(p=>{p.menuData.selectionRoot===this&&this.selectedItemsMap.has(p)&&(v.push(p.value),b.push(p))}),this._selected=v,this.selectedItems=b,this.value=this.selected.join(this.valueSeparator)}else this.selectedItemsMap.clear(),this.selectedItemsMap.set(e,!0),this.value=e.value,this._selected=[e.value],this.selectedItems=[e];if(!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this._selected=i,this.selectedItems=n,this.selectedItemsMap=o,this.value=a;return}if(t==="single"){for(const v of o.keys())v!==e&&(v.selected=!1);e.selected=!0}else t==="multiple"&&(e.selected=!e.selected)}handleKeydown(e){if(e.defaultPrevented)return;const t=this.childItems[this.focusedItemIndex];t&&(t.focused=!0);const{key:o}=e;if(e.shiftKey&&e.target!==this&&this.hasAttribute("tabindex")){this.removeAttribute("tabindex");const i=n=>{!n.shiftKey&&!this.hasAttribute("tabindex")&&(this.tabIndex=0,document.removeEventListener("keyup",i),this.removeEventListener("focusout",i))};document.addEventListener("keyup",i),this.addEventListener("focusout",i)}if(o==="Tab"){this.prepareToCleanUp();return}if(o===" "&&(t!=null&&t.hasSubmenu)){t.openOverlay();return}if(o===" "||o==="Enter"){const i=this.childItems[this.focusedItemIndex];i&&i.menuData.selectionRoot===e.target&&(e.preventDefault(),i.click());return}if(o==="ArrowDown"||o==="ArrowUp"){const i=this.childItems[this.focusedItemIndex];i&&i.menuData.selectionRoot===e.target&&this.navigateWithinMenu(e);return}this.navigateBetweenRelatedMenus(e)}focusMenuItemByOffset(e){const t=e||1,o=this.childItems[this.focusedItemIndex];o&&(o.focused=!1,o.active=o.open),this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+e)%this.childItems.length;let i=this.childItems[this.focusedItemIndex],n=this.childItems.length;for(;i!=null&&i.disabled&&n;)n-=1,this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+t)%this.childItems.length,i=this.childItems[this.focusedItemIndex];return i!=null&&i.disabled||this.forwardFocusVisibleToItem(i),i}updateSelectedItemIndex(){let e=0;const t=new Map,o=[],i=[];let n=this.childItems.length;for(;n;){n-=1;const a=this.childItems[n];a.menuData.selectionRoot===this&&((a.selected||!this._hasUpdatedSelectedItemIndex&&this.selected.includes(a.value))&&(e=n,t.set(a,!0),o.unshift(a.value),i.unshift(a)),n!==e&&(a.focused=!1))}i.map((a,h)=>{h>0&&(a.focused=!1)}),this.selectedItemsMap=t,this._selected=o,this.selectedItems=i,this.value=this.selected.join(this.valueSeparator),this.focusedItemIndex=e,this.focusInItemIndex=e}closeDescendentOverlays(){this.descendentOverlays.forEach(e=>{e.open=!1}),this.descendentOverlays=new Map}render(){return this.renderMenuItemSlot()}connectedCallback(){super.connectedCallback(),!this.hasAttribute("role")&&!this.ignore&&this.setAttribute("role",this.ownRole),this.updateComplete.then(()=>this.updateItemFocus())}disconnectedCallback(){this.cachedChildItems=void 0,this.selectedItems=[],this.selectedItemsMap.clear(),this.childItemSet.clear(),this.descendentOverlays=new Map,super.disconnectedCallback()}handleDescendentOverlayOpened(e){const t=e.composedPath()[0];t.overlayElement&&this.descendentOverlays.set(t.overlayElement,t.overlayElement)}handleDescendentOverlayClosed(e){const t=e.composedPath()[0];t.overlayElement&&this.descendentOverlays.delete(t.overlayElement)}navigateWithinMenu(e){const{key:t}=e,o=this.childItems[this.focusedItemIndex],i=t==="ArrowDown"?1:-1,n=this.focusMenuItemByOffset(i);n!==o&&(e.preventDefault(),e.stopPropagation(),n.scrollIntoView({block:"nearest"}))}navigateBetweenRelatedMenus(e){const{key:t}=e;e.stopPropagation();const o=this.isLTR&&t==="ArrowRight"||!this.isLTR&&t==="ArrowLeft",i=this.isLTR&&t==="ArrowLeft"||!this.isLTR&&t==="ArrowRight";if(o){const n=this.childItems[this.focusedItemIndex];n!=null&&n.hasSubmenu&&n.openOverlay()}else i&&this.isSubmenu&&(this.dispatchEvent(new Event("close",{bubbles:!0})),this.updateSelectedItemIndex())}renderMenuItemSlot(){return l.x`
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const base = require("../base-COw9n7UR.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+const divider_module = require("../divider.module-Cm5LcDRV.cjs");
+const randomId = require("../random-id-BE6HA503.cjs");
+const mutationController_js = require("@lit-labs/observers/mutation-controller.js");
+const focusable = require("../focusable-BPrTcZPd.cjs");
+const likeAnchor = require("../like-anchor-D62faRNG.cjs");
+const observeSlotPresence = require("../observe-slot-presence-9AwLGUQ_.cjs");
+const observeSlotText = require("../observe-slot-text-CSofZeeF.cjs");
+const dependencyManger = require("../dependency-manger-CcIE1uvQ.cjs");
+const icons = require("@luzmo/icons");
+const slottableRequestEvent = require("../slottable-request-event-CANixJnR.cjs");
+const menuStyles = ":host{--menu-item-top-to-action: var(--luzmo-spacing-1);--menu-item-top-to-checkbox: var(--luzmo-spacing-1);--menu-item-label-line-height: var(--luzmo-line-height);--menu-item-label-line-height-cjk: 1.5;--menu-item-label-to-description-spacing: 1px;--menu-item-focus-indicator-width: var(--luzmo-indicator-width);--menu-item-focus-indicator-color: var(--luzmo-indicator-color);--menu-item-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--menu-item-label-content-color-default: var(--luzmo-font-color);--menu-item-label-content-color-hover: var(--luzmo-font-color-hover);--menu-item-label-content-color-down: var(--luzmo-font-color-down);--menu-item-label-content-color-focus: var(--luzmo-font-color-focus);--menu-item-highlight-label-background-color: var(--luzmo-primary);--menu-item-highlight-label-content-color: var(--luzmo-font-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-font-color-hover );--menu-item-highlight-label-content-color-down: var(--luzmo-font-color-down);--menu-item-highlight-label-content-color-focus: var( --luzmo-font-color-focus );--menu-item-label-icon-color-default: var(--luzmo-font-color);--menu-item-label-icon-color-hover: var(--luzmo-font-color-hover);--menu-item-label-icon-color-down: var(--luzmo-font-color-down);--menu-item-label-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-label-content-color-disabled: var(--luzmo-font-color-disabled);--menu-item-label-icon-color-disabled: var(--luzmo-font-color-disabled);--menu-item-description-line-height: var(--luzmo-line-height);--menu-item-description-line-height-cjk: 1.5;--menu-item-description-color-default: var(--luzmo-font-color);--menu-item-description-color-hover: var(--luzmo-font-color-hover);--menu-item-description-color-down: var(--luzmo-font-color-down);--menu-item-description-color-focus: var(--luzmo-font-color-focus);--menu-item-description-color-disabled: var(--luzmo-disabled-color);--menu-section-header-line-height: var(--luzmo-line-height);--menu-section-header-line-height-cjk: 1.5;--menu-section-header-font-weight: bold;--menu-section-header-color: var(--luzmo-font-color-hard);--menu-collapsible-icon-color: var(--luzmo-font-color-hard);--menu-checkmark-icon-color-default: var(--luzmo-primary);--menu-checkmark-icon-color-hover: var(--luzmo-primary-hover);--menu-checkmark-icon-color-down: var(--luzmo-primary-down);--menu-checkmark-icon-color-focus: var(--luzmo-primary-focus);--menu-drillin-icon-color-default: var(--luzmo-font-color);--menu-drillin-icon-color-hover: var(--luzmo-font-color-hover);--menu-drillin-icon-color-down: var(--luzmo-font-color-down);--menu-drillin-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-value-color-default: var(--luzmo-font-color);--menu-item-value-color-hover: var(--luzmo-font-color-hover);--menu-item-value-color-down: var(--luzmo-font-color-down);--menu-item-value-color-focus: var(--luzmo-font-color-focus);--menu-checkmark-display-hidden: none;--menu-checkmark-display-shown: block;--menu-checkmark-display: block;--menu-item-collapsible-no-icon-submenu-item-padding-x-start: 28px;--menu-item-background-color-selected: var(--luzmo-background-color);--menu-item-background-color-default: var(--luzmo-background-color);--menu-item-background-color-hover: var(--luzmo-background-color-hover);--menu-item-background-color-down: var(--luzmo-background-color-down);--menu-item-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--menu-item-min-height: var(--luzmo-component-height);--menu-item-icon-height: var(--luzmo-font-size);--menu-item-icon-width: var(--luzmo-font-size);--menu-item-label-font-size: var(--luzmo-font-size);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size);--menu-section-header-min-width: var(--luzmo-component-height);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--menu-item-min-height: var(--luzmo-component-height-s);--menu-item-icon-height: var(--luzmo-font-size-s);--menu-item-icon-width: var(--luzmo-font-size-s);--menu-item-label-font-size: var(--luzmo-font-size-s);--menu-item-label-text-to-visual: var(--luzmo-spacing-3);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-3);--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: var(--luzmo-spacing-2);--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size-s);--menu-section-header-min-width: var(--luzmo-component-height-s);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size-s);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-3);--menu-back-icon-margin: var(--luzmo-spacing-3)}:host([size=l]){--menu-item-min-height: var(--luzmo-component-height-l);--menu-item-icon-height: var(--luzmo-font-size-l);--menu-item-icon-width: var(--luzmo-font-size-l);--menu-item-label-font-size: var(--luzmo-font-size-l);--menu-item-label-text-to-visual: var(--luzmo-spacing-4);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-4);--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-3);--menu-item-description-font-size: var(--luzmo-font-size-s);--menu-section-header-font-size: var(--luzmo-font-size-l);--menu-section-header-min-width: var(--luzmo-component-height-l);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--menu-item-checkmark-size: var(--luzmo-font-size-s);--menu-item-angle-size: var(--luzmo-font-size-l);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: var(--luzmo-spacing-4);--menu-back-icon-margin: var(--luzmo-spacing-4)}:host([size=xl]){--menu-item-min-height: var(--luzmo-component-height-xl);--menu-item-icon-height: var(--luzmo-font-size-xl);--menu-item-icon-width: var(--luzmo-font-size-xl);--menu-item-label-font-size: var(--luzmo-font-size-xl);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-4);--menu-item-description-font-size: var(--luzmo-font-size);--menu-section-header-font-size: var(--luzmo-font-size-xl);--menu-section-header-min-width: var(--luzmo-component-height-xl);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size);--menu-item-angle-size: var(--luzmo-font-size-xl);--menu-item-top-to-icon: calc( ( var(--menu-item-min-height) - var(--menu-item-top-edge-to-text) - var( --menu-item-bottom-edge-to-text ) - var(--menu-item-icon-height) ) / 2 );--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([variant=highlight]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);--menu-item-highlight-label-content-color-hover: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-down: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-focus: var( --luzmo-primary-inverse-color )}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}@media (forced-colors: active){:host{--highcontrast-menu-item-background-color-default: ButtonFace;--highcontrast-menu-item-color-default: ButtonText;--highcontrast-menu-item-background-color-focus: Highlight;--highcontrast-menu-item-color-focus: HighlightText;--highcontrast-menu-checkmark-icon-color-default: Highlight;--highcontrast-menu-item-color-disabled: GrayText;--highcontrast-menu-item-focus-indicator-color: Highlight;--highcontrast-menu-item-selected-background-color: Highlight;--highcontrast-menu-item-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-menu-item-selected-background-color: SelectedItem;--highcontrast-menu-item-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-menu-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--menu-item-label-line-height: var( --luzmo-menu-item-label-line-height-cjk, var(--menu-item-label-line-height-cjk) );--menu-item-description-line-height: var( --luzmo-menu-item-description-line-height-cjk, var(--menu-item-description-line-height-cjk) );--menu-section-header-line-height: var( --luzmo-menu-section-header-line-height-cjk, var(--menu-section-header-line-height-cjk) )}:host([selects]) ::slotted(luzmo-menu-item){--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-selectable-edge-to-text-not-selected, var(--menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(luzmo-menu-item[selected]){--menu-checkmark-display: var(--menu-checkmark-display-shown);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content))}.luzmo-Menu-backIcon{margin-block:var(--luzmo-menu-back-icon-margin-block, var(--menu-back-icon-margin));margin-inline:var(--luzmo-menu-back-icon-margin-inline, var(--menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .luzmo-Menu-sectionHeading{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc((var(--luzmo-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+function elementIsOrContains(el, isOrContains) {
+  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
+}
+class LuzmoMenu extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  noDefaultSize: true
+}) {
+  constructor() {
+    super();
+    this.label = "";
+    this.ignore = false;
+    this.value = "";
+    this.valueSeparator = ",";
+    this.selectedItems = [];
+    this.focusedItemIndex = 0;
+    this.focusInItemIndex = 0;
+    this._selected = [];
+    this.cacheUpdated = Promise.resolve();
+    this.childItemSet = /* @__PURE__ */ new Set();
+    this.selectedItemsMap = /* @__PURE__ */ new Map();
+    this._hasUpdatedSelectedItemIndex = false;
+    this._willUpdateItems = false;
+    this.pointerUpTarget = null;
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+    this.handleSubmenuClosed = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
+        new Event("luzmo-menu-submenu-closed", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.handleSubmenuOpened = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
+        new Event("luzmo-menu-submenu-opened", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      const focusedItem = this.childItems[this.focusedItemIndex];
+      if (focusedItem) {
+        focusedItem.focused = false;
+      }
+      const openedItem = event.composedPath().find((el) => this.childItemSet.has(el));
+      if (!openedItem) {
+        return;
+      }
+      const openedItemIndex = this.childItems.indexOf(
+        openedItem
+      );
+      this.focusedItemIndex = openedItemIndex;
+      this.focusInItemIndex = openedItemIndex;
+    };
+    this.resolveCacheUpdated = () => {
+    };
+    this.addEventListener(
+      "luzmo-menu-item-added-or-updated",
+      this.onSelectableItemAddedOrUpdated
+    );
+    this.addEventListener(
+      "luzmo-menu-item-added-or-updated",
+      this.onFocusableItemAddedOrUpdated,
+      {
+        capture: true
+      }
+    );
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("pointerup", this.handlePointerup);
+    this.addEventListener("focusin", this.handleFocusin);
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("luzmo-opened", this.handleSubmenuOpened);
+    this.addEventListener("luzmo-closed", this.handleSubmenuClosed);
+  }
+  static get styles() {
+    return [lit.unsafeCSS(menuStyles)];
+  }
+  get isSubmenu() {
+    return this.slot === "submenu";
+  }
+  get selected() {
+    return this._selected;
+  }
+  set selected(selected) {
+    if (selected === this.selected) {
+      return;
+    }
+    const old = this.selected;
+    this._selected = selected;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItems.forEach((item) => {
+      if (this !== item.menuData.selectionRoot) {
+        return;
+      }
+      item.selected = this.selected.includes(item.value);
+      if (item.selected) {
+        this.selectedItems.push(item);
+        this.selectedItemsMap.set(item, true);
+      }
+    });
+    this.requestUpdate("selected", old);
+  }
+  get childItems() {
+    if (!this.cachedChildItems) {
+      this.cachedChildItems = this.updateCachedMenuItems();
+    }
+    return this.cachedChildItems;
+  }
+  /**
+   * Hide this getter from web-component-analyzer until
+   * https://github.com/runem/web-component-analyzer/issues/131
+   * has been addressed.
+   *
+   * @private
+   */
+  get childRole() {
+    if (this.resolvedRole === "listbox") {
+      return "option";
+    }
+    switch (this.resolvedSelects) {
+      case "single": {
+        return "menuitemradio";
+      }
+      case "multiple": {
+        return "menuitemcheckbox";
+      }
+      default: {
+        return "menuitem";
+      }
+    }
+  }
+  get ownRole() {
+    return "menu";
+  }
+  focus({ preventScroll } = {}) {
+    if (this.childItems.every((childItem) => childItem.disabled)) {
+      return;
+    }
+    if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
+      super.focus({ preventScroll });
+      return;
+    }
+    this.focusMenuItemByOffset(0);
+    super.focus({ preventScroll });
+    const selectedItem = this.selectedItems[0];
+    if (selectedItem && !preventScroll) {
+      selectedItem.scrollIntoView({ block: "nearest" });
+    }
+  }
+  handleFocusin(event) {
+    var _a;
+    if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
+      return;
+    }
+    const activeElement = this.getRootNode().activeElement;
+    const selectionRoot = ((_a = this.childItems[this.focusedItemIndex]) == null ? void 0 : _a.menuData.selectionRoot) || this;
+    if (activeElement !== selectionRoot || event.target !== this) {
+      selectionRoot.focus({ preventScroll: true });
+      if (activeElement && this.focusedItemIndex === 0) {
+        const offset = this.childItems.indexOf(activeElement);
+        this.focusMenuItemByOffset(Math.max(offset, 0));
+      }
+    }
+    this.startListeningToKeyboard();
+  }
+  startListeningToKeyboard() {
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  handleBlur(event) {
+    if (elementIsOrContains(this, event.relatedTarget)) {
+      return;
+    }
+    this.stopListeningToKeyboard();
+    this.childItems.forEach((child) => child.focused = false);
+    this.removeAttribute("aria-activedescendant");
+  }
+  stopListeningToKeyboard() {
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
+  selectOrToggleItem(targetItem) {
+    const resolvedSelects = this.resolvedSelects;
+    const oldSelectedItemsMap = new Map(this.selectedItemsMap);
+    const oldSelected = [...this.selected];
+    const oldSelectedItems = [...this.selectedItems];
+    const oldValue = this.value;
+    const focusedChild = this.childItems[this.focusedItemIndex];
+    if (focusedChild) {
+      focusedChild.focused = false;
+      focusedChild.active = false;
+    }
+    this.focusedItemIndex = this.childItems.indexOf(targetItem);
+    this.forwardFocusVisibleToItem(targetItem);
+    if (resolvedSelects === "multiple") {
+      if (this.selectedItemsMap.has(targetItem)) {
+        this.selectedItemsMap.delete(targetItem);
+      } else {
+        this.selectedItemsMap.set(targetItem, true);
+      }
+      const selected = [];
+      const selectedItems = [];
+      this.childItemSet.forEach((childItem) => {
+        if (childItem.menuData.selectionRoot !== this) {
+          return;
+        }
+        if (this.selectedItemsMap.has(childItem)) {
+          selected.push(childItem.value);
+          selectedItems.push(childItem);
+        }
+      });
+      this._selected = selected;
+      this.selectedItems = selectedItems;
+      this.value = this.selected.join(this.valueSeparator);
+    } else {
+      this.selectedItemsMap.clear();
+      this.selectedItemsMap.set(targetItem, true);
+      this.value = targetItem.value;
+      this._selected = [targetItem.value];
+      this.selectedItems = [targetItem];
+    }
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (!applyDefault) {
+      this._selected = oldSelected;
+      this.selectedItems = oldSelectedItems;
+      this.selectedItemsMap = oldSelectedItemsMap;
+      this.value = oldValue;
+      return;
+    }
+    if (resolvedSelects === "single") {
+      for (const oldItem of oldSelectedItemsMap.keys()) {
+        if (oldItem !== targetItem) {
+          oldItem.selected = false;
+        }
+      }
+      targetItem.selected = true;
+    } else if (resolvedSelects === "multiple") {
+      targetItem.selected = !targetItem.selected;
+    }
+  }
+  handleKeydown(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    if (lastFocusedItem) {
+      lastFocusedItem.focused = true;
+    }
+    const { key } = event;
+    if (event.shiftKey && event.target !== this && this.hasAttribute("tabindex")) {
+      this.removeAttribute("tabindex");
+      const replaceTabindex = (eventForTab) => {
+        if (!eventForTab.shiftKey && !this.hasAttribute("tabindex")) {
+          this.tabIndex = 0;
+          document.removeEventListener("keyup", replaceTabindex);
+          this.removeEventListener("focusout", replaceTabindex);
+        }
+      };
+      document.addEventListener("keyup", replaceTabindex);
+      this.addEventListener("focusout", replaceTabindex);
+    }
+    if (key === "Tab") {
+      this.prepareToCleanUp();
+      return;
+    }
+    if (key === " " && (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu)) {
+      lastFocusedItem.openOverlay();
+      return;
+    }
+    if (key === " " || key === "Enter") {
+      const childItem = this.childItems[this.focusedItemIndex];
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        event.preventDefault();
+        childItem.click();
+      }
+      return;
+    }
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      const childItem = this.childItems[this.focusedItemIndex];
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        this.navigateWithinMenu(event);
+      }
+      return;
+    }
+    this.navigateBetweenRelatedMenus(event);
+  }
+  focusMenuItemByOffset(offset) {
+    const step = offset || 1;
+    const focusedItem = this.childItems[this.focusedItemIndex];
+    if (focusedItem) {
+      focusedItem.focused = false;
+      focusedItem.active = focusedItem.open;
+    }
+    this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length;
+    let itemToFocus = this.childItems[this.focusedItemIndex];
+    let availableItems = this.childItems.length;
+    while ((itemToFocus == null ? void 0 : itemToFocus.disabled) && availableItems) {
+      availableItems -= 1;
+      this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + step) % this.childItems.length;
+      itemToFocus = this.childItems[this.focusedItemIndex];
+    }
+    if (!(itemToFocus == null ? void 0 : itemToFocus.disabled)) {
+      this.forwardFocusVisibleToItem(itemToFocus);
+    }
+    return itemToFocus;
+  }
+  updateSelectedItemIndex() {
+    let firstOrFirstSelectedIndex = 0;
+    const selectedItemsMap = /* @__PURE__ */ new Map();
+    const selected = [];
+    const selectedItems = [];
+    let itemIndex = this.childItems.length;
+    while (itemIndex) {
+      itemIndex -= 1;
+      const childItem = this.childItems[itemIndex];
+      if (childItem.menuData.selectionRoot === this) {
+        if (childItem.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(childItem.value)) {
+          firstOrFirstSelectedIndex = itemIndex;
+          selectedItemsMap.set(childItem, true);
+          selected.unshift(childItem.value);
+          selectedItems.unshift(childItem);
+        }
+        if (itemIndex !== firstOrFirstSelectedIndex) {
+          childItem.focused = false;
+        }
+      }
+    }
+    selectedItems.map((item, i) => {
+      if (i > 0) {
+        item.focused = false;
+      }
+    });
+    this.selectedItemsMap = selectedItemsMap;
+    this._selected = selected;
+    this.selectedItems = selectedItems;
+    this.value = this.selected.join(this.valueSeparator);
+    this.focusedItemIndex = firstOrFirstSelectedIndex;
+    this.focusInItemIndex = firstOrFirstSelectedIndex;
+  }
+  closeDescendentOverlays() {
+    this.descendentOverlays.forEach((overlay) => {
+      overlay.open = false;
+    });
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+  }
+  render() {
+    return this.renderMenuItemSlot();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role") && !this.ignore) {
+      this.setAttribute("role", this.ownRole);
+    }
+    this.updateComplete.then(() => this.updateItemFocus());
+  }
+  disconnectedCallback() {
+    this.cachedChildItems = void 0;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItemSet.clear();
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+    super.disconnectedCallback();
+  }
+  handleDescendentOverlayOpened(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement) {
+      return;
+    }
+    this.descendentOverlays.set(target.overlayElement, target.overlayElement);
+  }
+  handleDescendentOverlayClosed(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement) {
+      return;
+    }
+    this.descendentOverlays.delete(target.overlayElement);
+  }
+  navigateWithinMenu(event) {
+    const { key } = event;
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    const direction = key === "ArrowDown" ? 1 : -1;
+    const itemToFocus = this.focusMenuItemByOffset(direction);
+    if (itemToFocus === lastFocusedItem) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    itemToFocus.scrollIntoView({ block: "nearest" });
+  }
+  navigateBetweenRelatedMenus(event) {
+    const { key } = event;
+    event.stopPropagation();
+    const shouldOpenSubmenu = this.isLTR && key === "ArrowRight" || !this.isLTR && key === "ArrowLeft";
+    const shouldCloseSelfAsSubmenu = this.isLTR && key === "ArrowLeft" || !this.isLTR && key === "ArrowRight";
+    if (shouldOpenSubmenu) {
+      const lastFocusedItem = this.childItems[this.focusedItemIndex];
+      if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
+        lastFocusedItem.openOverlay();
+      }
+    } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      this.dispatchEvent(new Event("close", { bubbles: true }));
+      this.updateSelectedItemIndex();
+    }
+  }
+  renderMenuItemSlot() {
+    return lit.html`
       <slot
         @luzmo-menu-submenu-opened=${this.handleDescendentOverlayOpened}
         @luzmo-menu-submenu-closed=${this.handleDescendentOverlayClosed}
         @slotchange=${this.handleSlotchange}
       ></slot>
-    `}firstUpdated(e){if(super.firstUpdated(e),!this.hasAttribute("tabindex")&&!this.ignore){const o=this.getAttribute("role");this.tabIndex=o==="group"?-1:0}const t=[new Promise(o=>requestAnimationFrame(()=>o(!0)))];[...this.children].forEach(o=>{o.localName==="luzmo-menu-item"&&t.push(o.updateComplete)}),this.childItemsUpdated=Promise.all(t)}updated(e){super.updated(e),e.has("selects")&&this.hasUpdated&&this.selectsChanged(),e.has("label")&&(this.label||e.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}selectsChanged(){const e=[new Promise(t=>requestAnimationFrame(()=>t(!0)))];this.childItemSet.forEach(t=>{e.push(t.triggerUpdate())}),this.childItemsUpdated=Promise.all(e)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.childItemsUpdated,await this.cacheUpdated,e}updateCachedMenuItems(){if(this.cachedChildItems=[],!this.menuSlot)return[];const e=this.menuSlot.assignedElements({flatten:!0});for(const[t,o]of e.entries()){if(this.childItemSet.has(o)){this.cachedChildItems.push(o);continue}const n=o.localName==="slot"?o.assignedElements({flatten:!0}):[...o.querySelectorAll(":scope > *")];e.splice(t,1,o,...n)}return this.cachedChildItems}onFocusableItemAddedOrUpdated(e){e.menuCascade.set(this,{hadFocusRoot:!!e.item.menuData.focusRoot,ancestorWithSelects:e.currentAncestorWithSelects}),this.selects&&(e.currentAncestorWithSelects=this),e.item.menuData.focusRoot=e.item.menuData.focusRoot||this}onSelectableItemAddedOrUpdated(e){var i,n;const t=e.menuCascade.get(this);if(!t)return;if(e.item.menuData.parentMenu=e.item.menuData.parentMenu||this,t.hadFocusRoot&&!this.ignore&&(this.tabIndex=-1),this.addChildItem(e.item),this.selects==="inherit"){this.resolvedSelects="inherit";const a=(i=e.currentAncestorWithSelects)==null?void 0:i.ignore;this.resolvedRole=a?"none":((n=e.currentAncestorWithSelects)==null?void 0:n.getAttribute("role"))||this.getAttribute("role")||void 0}else this.selects?(this.resolvedRole=this.ignore?"none":this.getAttribute("role")||void 0,this.resolvedSelects=this.selects):(this.resolvedRole=this.ignore?"none":this.getAttribute("role")||void 0,this.resolvedSelects=this.resolvedRole==="none"?"ignore":"none");const o=this.resolvedSelects==="single"||this.resolvedSelects==="multiple";e.item.menuData.cleanupSteps.push(a=>this.removeChildItem(a)),(o||!this.selects&&this.resolvedSelects!=="ignore")&&!e.item.menuData.selectionRoot&&(e.item.setRole(this.childRole),e.item.menuData.selectionRoot=e.item.menuData.selectionRoot||this,e.item.selected&&(this.selectedItemsMap.set(e.item,!0),this.selectedItems=[...this.selectedItems,e.item],this._selected=[...this.selected,e.item.value],this.value=this.selected.join(this.valueSeparator)))}addChildItem(e){this.childItemSet.add(e),this.handleItemsChanged()}async removeChildItem(e){this.childItemSet.delete(e),this.cachedChildItems=void 0,e.focused&&(this.handleItemsChanged(),await this.updateComplete,this.focus())}handleClick(e){if(this.pointerUpTarget===e.target){this.pointerUpTarget=null;return}this.handlePointerBasedSelection(e)}handlePointerup(e){this.pointerUpTarget=e.target,this.handlePointerBasedSelection(e)}handlePointerBasedSelection(e){var i,n;if(e instanceof MouseEvent&&e.button!==0)return;const o=e.composedPath().find(a=>a instanceof Element?a.getAttribute("role")===this.childRole:!1);if(e.defaultPrevented){const a=this.childItems.indexOf(o);((i=o==null?void 0:o.menuData)==null?void 0:i.focusRoot)===this&&a!==-1&&(this.focusedItemIndex=a);return}if(o!=null&&o.href&&o.href.length>0){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));return}else if(((n=o==null?void 0:o.menuData)==null?void 0:n.selectionRoot)===this&&this.childItems.length>0){if(e.preventDefault(),o.hasSubmenu||o.open)return;this.selectOrToggleItem(o)}else return;this.prepareToCleanUp()}prepareToCleanUp(){document.addEventListener("focusout",()=>{requestAnimationFrame(()=>{const e=this.childItems[this.focusedItemIndex];e&&(e.focused=!1,this.updateSelectedItemIndex())})},{once:!0})}handleItemsChanged(){this.cachedChildItems=void 0,this._willUpdateItems||(this._willUpdateItems=!0,this.cacheUpdated=this.updateCache())}async updateCache(){await(this.hasUpdated?new Promise(e=>requestAnimationFrame(()=>e(!0))):Promise.all([new Promise(e=>requestAnimationFrame(()=>e(!0))),this.updateComplete])),this.cachedChildItems===void 0&&(this.updateSelectedItemIndex(),this.updateItemFocus()),this._willUpdateItems=!1}updateItemFocus(){if(this.childItems.length===0)return;const e=this.childItems[this.focusInItemIndex];this.getRootNode().activeElement===e.menuData.focusRoot&&this.forwardFocusVisibleToItem(e)}forwardFocusVisibleToItem(e){if(!e||e.menuData.focusRoot!==this)return;this.closeDescendentOverlays();const t=this.hasVisibleFocusInTree()||!!this.childItems.some(o=>o.hasVisibleFocusInTree());e.focused=t,this.setAttribute("aria-activedescendant",e.id),e.menuData.selectionRoot&&e.menuData.selectionRoot!==this&&e.menuData.selectionRoot.focus()}handleSlotchange({target:e}){const t=e.assignedElements({flatten:!0});this.childItems.length!==t.length&&t.forEach(o=>{o.triggerUpdate!==void 0?o.triggerUpdate():o.childItems!==void 0&&o.childItems.forEach(i=>{i.triggerUpdate()})})}}m([l.n({type:String,reflect:!0})],u.prototype,"label",2);m([l.n({type:Boolean,reflect:!0})],u.prototype,"ignore",2);m([l.n({type:String,reflect:!0})],u.prototype,"variant",2);m([l.n({type:String,reflect:!0})],u.prototype,"selects",2);m([l.n({type:String})],u.prototype,"value",2);m([l.n({type:String,attribute:"value-separator"})],u.prototype,"valueSeparator",2);m([l.n({attribute:!1})],u.prototype,"selected",1);m([l.n({attribute:!1})],u.prototype,"selectedItems",2);m([f.e("slot:not([name])")],u.prototype,"menuSlot",2);const _=":host{--menu-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-menu-section-divider-margin-block, max(0px, (var(--menu-item-section-divider-height) - var(--menu-divider-thickness)) / 2));margin-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));overflow:visible}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:block;flex-shrink:0}";class I extends z.SizedMixin(l.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[l.r(y.dividerStyles),l.r(_)]}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","separator")}}const q=".luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.header{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .header{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{margin:0;display:inline-flex;overflow:visible;flex-direction:column}[hidden]{display:none!important}";var B=Object.defineProperty,w=(r,e,t,o)=>{for(var i=void 0,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=a(e,t,i)||i);return i&&B(e,t,i),i};class g extends u{constructor(){super(...arguments),this.headerId=""}static get styles(){return[...super.styles,l.r(q)]}render(){return l.x`
+    `;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    if (!this.hasAttribute("tabindex") && !this.ignore) {
+      const role = this.getAttribute("role");
+      this.tabIndex = role === "group" ? -1 : 0;
+    }
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
+    ];
+    [...this.children].forEach((item) => {
+      if (item.localName === "luzmo-menu-item") {
+        updates.push(item.updateComplete);
+      }
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selects") && this.hasUpdated) {
+      this.selectsChanged();
+    }
+    if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+  selectsChanged() {
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
+    ];
+    this.childItemSet.forEach((childItem) => {
+      updates.push(childItem.triggerUpdate());
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.childItemsUpdated;
+    await this.cacheUpdated;
+    return complete;
+  }
+  updateCachedMenuItems() {
+    this.cachedChildItems = [];
+    if (!this.menuSlot) {
+      return [];
+    }
+    const slottedElements = this.menuSlot.assignedElements({
+      flatten: true
+    });
+    for (const [i, slottedElement] of slottedElements.entries()) {
+      if (this.childItemSet.has(slottedElement)) {
+        this.cachedChildItems.push(slottedElement);
+        continue;
+      }
+      const isHTMLSlotElement = slottedElement.localName === "slot";
+      const flattenedChildren = isHTMLSlotElement ? slottedElement.assignedElements({
+        flatten: true
+      }) : [...slottedElement.querySelectorAll(":scope > *")];
+      slottedElements.splice(
+        i,
+        1,
+        slottedElement,
+        ...flattenedChildren
+      );
+    }
+    return this.cachedChildItems;
+  }
+  /**
+   * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
+   * this event to announce its presence in the DOM. During the CAPTURE phase the first
+   * Menu based element that the event encounters will manage the focus state of the
+   * dispatching `<luzmo-menu-item>` element.
+   * @param event
+   */
+  onFocusableItemAddedOrUpdated(event) {
+    event.menuCascade.set(this, {
+      hadFocusRoot: !!event.item.menuData.focusRoot,
+      ancestorWithSelects: event.currentAncestorWithSelects
+    });
+    if (this.selects) {
+      event.currentAncestorWithSelects = this;
+    }
+    event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
+  }
+  /**
+   * When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
+   * this event to announce its presence in the DOM. During the BUBBLE phase the first
+   * Menu based element that the event encounters that does not inherit selection will
+   * manage the selection state of the dispatching `<luzmo-menu-item>` element.
+   * @param event
+   */
+  onSelectableItemAddedOrUpdated(event) {
+    var _a, _b;
+    const cascadeData = event.menuCascade.get(this);
+    if (!cascadeData) {
+      return;
+    }
+    event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
+    if (cascadeData.hadFocusRoot && !this.ignore) {
+      this.tabIndex = -1;
+    }
+    this.addChildItem(event.item);
+    if (this.selects === "inherit") {
+      this.resolvedSelects = "inherit";
+      const ignoreMenu = (_a = event.currentAncestorWithSelects) == null ? void 0 : _a.ignore;
+      this.resolvedRole = ignoreMenu ? "none" : ((_b = event.currentAncestorWithSelects) == null ? void 0 : _b.getAttribute("role")) || this.getAttribute("role") || void 0;
+    } else if (this.selects) {
+      this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.selects;
+    } else {
+      this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
+    }
+    const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
+    event.item.menuData.cleanupSteps.push(
+      (item) => this.removeChildItem(item)
+    );
+    if ((selects || !this.selects && this.resolvedSelects !== "ignore") && !event.item.menuData.selectionRoot) {
+      event.item.setRole(this.childRole);
+      event.item.menuData.selectionRoot = event.item.menuData.selectionRoot || this;
+      if (event.item.selected) {
+        this.selectedItemsMap.set(event.item, true);
+        this.selectedItems = [...this.selectedItems, event.item];
+        this._selected = [...this.selected, event.item.value];
+        this.value = this.selected.join(this.valueSeparator);
+      }
+    }
+  }
+  addChildItem(item) {
+    this.childItemSet.add(item);
+    this.handleItemsChanged();
+  }
+  async removeChildItem(item) {
+    this.childItemSet.delete(item);
+    this.cachedChildItems = void 0;
+    if (item.focused) {
+      this.handleItemsChanged();
+      await this.updateComplete;
+      this.focus();
+    }
+  }
+  handleClick(event) {
+    if (this.pointerUpTarget === event.target) {
+      this.pointerUpTarget = null;
+      return;
+    }
+    this.handlePointerBasedSelection(event);
+  }
+  handlePointerup(event) {
+    this.pointerUpTarget = event.target;
+    this.handlePointerBasedSelection(event);
+  }
+  handlePointerBasedSelection(event) {
+    var _a, _b;
+    if (event instanceof MouseEvent && event.button !== 0) {
+      return;
+    }
+    const path = event.composedPath();
+    const target = path.find((el) => {
+      if (!(el instanceof Element)) {
+        return false;
+      }
+      return el.getAttribute("role") === this.childRole;
+    });
+    if (event.defaultPrevented) {
+      const index = this.childItems.indexOf(target);
+      if (((_a = target == null ? void 0 : target.menuData) == null ? void 0 : _a.focusRoot) === this && index !== -1) {
+        this.focusedItemIndex = index;
+      }
+      return;
+    }
+    if ((target == null ? void 0 : target.href) && target.href.length > 0) {
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    } else if (((_b = target == null ? void 0 : target.menuData) == null ? void 0 : _b.selectionRoot) === this && this.childItems.length > 0) {
+      event.preventDefault();
+      if (target.hasSubmenu || target.open) {
+        return;
+      }
+      this.selectOrToggleItem(target);
+    } else {
+      return;
+    }
+    this.prepareToCleanUp();
+  }
+  prepareToCleanUp() {
+    document.addEventListener(
+      "focusout",
+      () => {
+        requestAnimationFrame(() => {
+          const focusedItem = this.childItems[this.focusedItemIndex];
+          if (focusedItem) {
+            focusedItem.focused = false;
+            this.updateSelectedItemIndex();
+          }
+        });
+      },
+      { once: true }
+    );
+  }
+  handleItemsChanged() {
+    this.cachedChildItems = void 0;
+    if (!this._willUpdateItems) {
+      this._willUpdateItems = true;
+      this.cacheUpdated = this.updateCache();
+    }
+  }
+  async updateCache() {
+    await (this.hasUpdated ? new Promise((res) => requestAnimationFrame(() => res(true))) : Promise.all([
+      new Promise((res) => requestAnimationFrame(() => res(true))),
+      this.updateComplete
+    ]));
+    if (this.cachedChildItems === void 0) {
+      this.updateSelectedItemIndex();
+      this.updateItemFocus();
+    }
+    this._willUpdateItems = false;
+  }
+  updateItemFocus() {
+    if (this.childItems.length === 0) {
+      return;
+    }
+    const focusInItem = this.childItems[this.focusInItemIndex];
+    if (this.getRootNode().activeElement === focusInItem.menuData.focusRoot) {
+      this.forwardFocusVisibleToItem(focusInItem);
+    }
+  }
+  forwardFocusVisibleToItem(item) {
+    if (!item || item.menuData.focusRoot !== this) {
+      return;
+    }
+    this.closeDescendentOverlays();
+    const focused = this.hasVisibleFocusInTree() || !!this.childItems.some((child) => child.hasVisibleFocusInTree());
+    item.focused = focused;
+    this.setAttribute("aria-activedescendant", item.id);
+    if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
+      item.menuData.selectionRoot.focus();
+    }
+  }
+  handleSlotchange({
+    target
+  }) {
+    const assignedElements = target.assignedElements({
+      flatten: true
+    });
+    if (this.childItems.length !== assignedElements.length) {
+      assignedElements.forEach((item) => {
+        if (item.triggerUpdate !== void 0) {
+          item.triggerUpdate();
+        } else if (item.childItems !== void 0) {
+          item.childItems.forEach((child) => {
+            child.triggerUpdate();
+          });
+        }
+      });
+    }
+  }
+}
+__decorateClass$2([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "label", 2);
+__decorateClass$2([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMenu.prototype, "ignore", 2);
+__decorateClass$2([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "variant", 2);
+__decorateClass$2([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMenu.prototype, "selects", 2);
+__decorateClass$2([
+  decorators_js.property({ type: String })
+], LuzmoMenu.prototype, "value", 2);
+__decorateClass$2([
+  decorators_js.property({ type: String, attribute: "value-separator" })
+], LuzmoMenu.prototype, "valueSeparator", 2);
+__decorateClass$2([
+  decorators_js.property({ attribute: false })
+], LuzmoMenu.prototype, "selected", 1);
+__decorateClass$2([
+  decorators_js.property({ attribute: false })
+], LuzmoMenu.prototype, "selectedItems", 2);
+__decorateClass$2([
+  decorators_js.query("slot:not([name])")
+], LuzmoMenu.prototype, "menuSlot", 2);
+const menuDividerStyles = ":host{--menu-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-menu-section-divider-margin-block, max(0px, (var(--menu-item-section-divider-height) - var(--menu-divider-thickness)) / 2));margin-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));overflow:visible}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:block;flex-shrink:0}";
+class LuzmoMenuDivider extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  validSizes: ["s", "m", "l"]
+}) {
+  static get styles() {
+    return [lit.unsafeCSS(divider_module.dividerStyles), lit.unsafeCSS(menuDividerStyles)];
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "separator");
+  }
+}
+const menuGroupStyles = ".luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.header{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .header{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{margin:0;display:inline-flex;overflow:visible;flex-direction:column}[hidden]{display:none!important}";
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+class LuzmoMenuGroup extends LuzmoMenu {
+  constructor() {
+    super(...arguments);
+    this.headerId = "";
+  }
+  static get styles() {
+    return [...super.styles, lit.unsafeCSS(menuGroupStyles)];
+  }
+  render() {
+    return lit.html`
       <span class="header" ?hidden=${!this.headerElement}>
         <slot name="header" @slotchange=${this.updateLabel}></slot>
       </span>
@@ -32,19 +797,199 @@
         ignore
         >${this.renderMenuItemSlot()}</luzmo-menu
       >
-    `}get ownRole(){switch(this.selects){case"multiple":case"single":case"inherit":return"group";default:return"menu"}}updateLabel(){const e=this.headerElements.length>0?this.headerElements[0]:void 0;if(e!==this.headerElement)if(this.headerElement&&this.headerElement.id===this.headerId&&this.headerElement.removeAttribute("id"),e){this.headerId=this.headerId||`luzmo-menu-group-label-${k.randomID()}`;const t=e.id||this.headerId;e.id||(e.id=t),this.setAttribute("aria-labelledby",t)}else this.removeAttribute("aria-labelledby");this.headerElement=e}}w([E.n({slot:"header",flatten:!0})],g.prototype,"headerElements");w([S.r()],g.prototype,"headerElement");const F='.checkmark{display:var(--luzmo-menu-checkmark-display, var(--menu-checkmark-display));font-size:var(--luzmo-menu-item-checkmark-size, var(--menu-item-checkmark-size));fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));opacity:1;grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--luzmo-menu-item-top-to-checkmark, var(--menu-item-top-to-checkmark)) - var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.angle{font-size:var(--menu-item-angle-size);grid-area:angleArea;align-self:center;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--luzmo-menu-item-label-text-to-visual, var(--menu-item-label-text-to-visual));margin-block-start:var(--luzmo-menu-item-top-to-icon, var(--menu-item-top-to-icon));block-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));inline-size:var(--luzmo-menu-item-icon-width, var(--menu-item-icon-height));font-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)));line-height:var(--luzmo-menu-item-label-line-height, var(--menu-item-label-line-height));min-block-size:var(--luzmo-menu-item-min-height, var(--menu-item-min-height));padding-block-start:var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text));padding-block-end:var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-template:". angleAreaCollapsible . headingIconArea sectionHeadingArea . . ." "selectedArea angleAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea angleAreaDrillIn" 1fr ". . . . descriptionArea . . ." ". . . . submenuArea . . ." ". . . . . . . ."/auto auto auto auto 1fr auto auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;align-items:center;position:relative}.luzmo-Menu-itemCheckbox{--luzmo-checkbox-top-to-text: 0;--luzmo-checkbox-text-to-control: 0;min-block-size:0}.luzmo-Menu-itemCheckbox .luzmo-Checkbox-box{margin-block-start:var(--luzmo-menu-item-top-to-checkbox, var(--menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-itemSwitch{min-block-size:0}.luzmo-Menu-itemSwitch .luzmo-Switch-switch{margin-block-start:var(--luzmo-menu-item-top-to-action, var(--menu-item-top-to-action));margin-block-end:0}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-key-focus, var(--menu-item-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label,:host([focused])>.menu-item-tooltip-icon,:host(:focus)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-focus, var(--menu-item-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-focus, var(--menu-item-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-focus, var(--menu-item-value-color-focus)))}:host([focused])>.icon:not(.angle,.checkmark),:host(:focus)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)))}:host([focused])>.angle,:host(:focus)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--menu-item-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-down, var(--menu-item-background-color-down)))}:host(:is(:active,[active]))>#label,:host(:is(:active,[active]))>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-down, var(--menu-item-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-down, var(--menu-item-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-down, var(--menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) .menu-item-tooltip-icon,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}:host([focused]) .luzmo-Menu-back,:host([focused]){box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .luzmo-Menu-itemCheckbox{grid-area:checkmarkArea}.luzmo-Menu-itemSelection{grid-area:selectedArea}#label{--luzmo-switch-control-label-spacing: 0;--luzmo-switch-spacing-top-to-label: 0;font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-content-color-default, var(--menu-item-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)))}:host([selected]) #label{color:var(--menu-item-highlight-label-content-color)}:host([selected]) .menu-item-tooltip-icon{color:var(--menu-item-highlight-label-content-color)}::slotted([slot=value]){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-value-color-default, var(--menu-item-value-color-default)));font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));grid-area:valueArea;justify-self:end}.luzmo-Menu-itemActions,::slotted([slot=value]){align-self:start;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing))}.luzmo-Menu-itemActions{grid-area:actionsArea}[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-description-color-default, var(--menu-item-description-color-default)));font-size:var(--luzmo-menu-item-description-font-size, var(--menu-item-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-menu-item-description-line-height, var(--menu-item-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-menu-item-label-to-description-spacing, var(--menu-item-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.luzmo-Menu-item--collapsible.is-open{padding-block-end:0}.luzmo-Menu-item--collapsible.is-open .angle{transform:rotate(90deg)}:host([focused]) .luzmo-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .luzmo-Menu-item--collapsible.is-open,.luzmo-Menu-item--collapsible.is-open:focus{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}.luzmo-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}.luzmo-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)))}.luzmo-Menu-item--collapsible .angle{grid-area:angleAreaCollapsible}:host([has-submenu]) .angle{fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));grid-area:angleAreaDrillIn;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--menu-item-background-color-default: var( --highcontrast-menu-item-selected-background-color, var( --luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover) ) )}:host([has-submenu]) .is-open .icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover)))}:host(:hover)>#label,:host(:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-hover, var(--menu-item-label-content-color-hover)))}:host([selected]:hover)>#label,:host([selected]:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-highlight-label-content-color, var(--menu-item-highlight-label-content-color)))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-hover, var(--menu-item-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-hover, var(--menu-item-value-color-hover)))}:host(:hover)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host(:hover)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) .menu-item-tooltip-icon,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}.luzmo-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}:host([has-submenu]:hover) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}}:host([has-submenu][focused]) .angle,:host([has-submenu]:focus) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .luzmo-Menu-backButton{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{text-align:initial;font-family:var(--luzmo-menu-item-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}:host([has-submenu][disabled]) .angle{color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}#button{position:absolute;top:0;right:0;bottom:0;left:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors: active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}.menu-item-tooltip-container{grid-area:actionsArea;align-self:center;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));display:flex;align-items:center;justify-content:center}.menu-item-tooltip-container luzmo-tooltip{--tooltip-font-size: var( --luzmo-menu-item-tooltip-font-size, var(--tooltip-font-size) )}.menu-item-tooltip-icon-trigger{cursor:default;display:flex;align-items:center;justify-content:center}.menu-item-tooltip-icon{font-size:.875rem;width:.875rem;height:.875rem}';var j=Object.defineProperty,H=Object.getOwnPropertyDescriptor,c=(r,e,t,o)=>{for(var i=o>1?void 0:o?H(e,t):e,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=(o?a(e,t,i):a(i))||i);return o&&i&&j(e,t,i),i};const N=100,W=r=>l.x`
-  <span class="icon-container icon checkmark ${r.join(" ")}">
-    ${d.p3(d.F)}
+    `;
+  }
+  get ownRole() {
+    switch (this.selects) {
+      case "multiple":
+      case "single":
+      case "inherit": {
+        return "group";
+      }
+      default: {
+        return "menu";
+      }
+    }
+  }
+  updateLabel() {
+    const headerElement = this.headerElements.length > 0 ? this.headerElements[0] : void 0;
+    if (headerElement !== this.headerElement) {
+      if (this.headerElement && this.headerElement.id === this.headerId) {
+        this.headerElement.removeAttribute("id");
+      }
+      if (headerElement) {
+        this.headerId = this.headerId || `luzmo-menu-group-label-${randomId.randomID()}`;
+        const headerId = headerElement.id || this.headerId;
+        if (!headerElement.id) {
+          headerElement.id = headerId;
+        }
+        this.setAttribute("aria-labelledby", headerId);
+      } else {
+        this.removeAttribute("aria-labelledby");
+      }
+    }
+    this.headerElement = headerElement;
+  }
+}
+__decorateClass$1([
+  decorators_js.queryAssignedNodes({
+    slot: "header",
+    flatten: true
+  })
+], LuzmoMenuGroup.prototype, "headerElements");
+__decorateClass$1([
+  decorators_js.state()
+], LuzmoMenuGroup.prototype, "headerElement");
+const menuItemStyles = '.checkmark{display:var(--luzmo-menu-checkmark-display, var(--menu-checkmark-display));font-size:var(--luzmo-menu-item-checkmark-size, var(--menu-item-checkmark-size));fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));opacity:1;grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--luzmo-menu-item-top-to-checkmark, var(--menu-item-top-to-checkmark)) - var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.angle{font-size:var(--menu-item-angle-size);grid-area:angleArea;align-self:center;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--luzmo-menu-item-label-text-to-visual, var(--menu-item-label-text-to-visual));margin-block-start:var(--luzmo-menu-item-top-to-icon, var(--menu-item-top-to-icon));block-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));inline-size:var(--luzmo-menu-item-icon-width, var(--menu-item-icon-height));font-size:var(--luzmo-menu-item-icon-size, var(--menu-item-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)));line-height:var(--luzmo-menu-item-label-line-height, var(--menu-item-label-line-height));min-block-size:var(--luzmo-menu-item-min-height, var(--menu-item-min-height));padding-block-start:var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text));padding-block-end:var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-template:". angleAreaCollapsible . headingIconArea sectionHeadingArea . . ." "selectedArea angleAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea angleAreaDrillIn" 1fr ". . . . descriptionArea . . ." ". . . . submenuArea . . ." ". . . . . . . ."/auto auto auto auto 1fr auto auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;align-items:center;position:relative}.luzmo-Menu-itemCheckbox{--luzmo-checkbox-top-to-text: 0;--luzmo-checkbox-text-to-control: 0;min-block-size:0}.luzmo-Menu-itemCheckbox .luzmo-Checkbox-box{margin-block-start:var(--luzmo-menu-item-top-to-checkbox, var(--menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-itemSwitch{min-block-size:0}.luzmo-Menu-itemSwitch .luzmo-Switch-switch{margin-block-start:var(--luzmo-menu-item-top-to-action, var(--menu-item-top-to-action));margin-block-end:0}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-key-focus, var(--menu-item-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label,:host([focused])>.menu-item-tooltip-icon,:host(:focus)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-focus, var(--menu-item-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-focus, var(--menu-item-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-focus, var(--menu-item-value-color-focus)))}:host([focused])>.icon:not(.angle,.checkmark),:host(:focus)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)))}:host([focused])>.angle,:host(:focus)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--menu-item-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-down, var(--menu-item-background-color-down)))}:host(:is(:active,[active]))>#label,:host(:is(:active,[active]))>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-down, var(--menu-item-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-down, var(--menu-item-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-down, var(--menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) .menu-item-tooltip-icon,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}:host([focused]) .luzmo-Menu-back,:host([focused]){box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .luzmo-Menu-itemCheckbox{grid-area:checkmarkArea}.luzmo-Menu-itemSelection{grid-area:selectedArea}#label{--luzmo-switch-control-label-spacing: 0;--luzmo-switch-spacing-top-to-label: 0;font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-content-color-default, var(--menu-item-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)))}:host([selected]) #label{color:var(--menu-item-highlight-label-content-color)}:host([selected]) .menu-item-tooltip-icon{color:var(--menu-item-highlight-label-content-color)}::slotted([slot=value]){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-value-color-default, var(--menu-item-value-color-default)));font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));grid-area:valueArea;justify-self:end}.luzmo-Menu-itemActions,::slotted([slot=value]){align-self:start;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing))}.luzmo-Menu-itemActions{grid-area:actionsArea}[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-description-color-default, var(--menu-item-description-color-default)));font-size:var(--luzmo-menu-item-description-font-size, var(--menu-item-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-menu-item-description-line-height, var(--menu-item-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-menu-item-label-to-description-spacing, var(--menu-item-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.luzmo-Menu-item--collapsible.is-open{padding-block-end:0}.luzmo-Menu-item--collapsible.is-open .angle{transform:rotate(90deg)}:host([focused]) .luzmo-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .luzmo-Menu-item--collapsible.is-open,.luzmo-Menu-item--collapsible.is-open:focus{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}.luzmo-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}.luzmo-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)))}.luzmo-Menu-item--collapsible .angle{grid-area:angleAreaCollapsible}:host([has-submenu]) .angle{fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));grid-area:angleAreaDrillIn;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--menu-item-background-color-default: var( --highcontrast-menu-item-selected-background-color, var( --luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover) ) )}:host([has-submenu]) .is-open .icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover)))}:host(:hover)>#label,:host(:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-hover, var(--menu-item-label-content-color-hover)))}:host([selected]:hover)>#label,:host([selected]:hover)>.menu-item-tooltip-icon{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-highlight-label-content-color, var(--menu-item-highlight-label-content-color)))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-hover, var(--menu-item-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-hover, var(--menu-item-value-color-hover)))}:host(:hover)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host(:hover)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) .menu-item-tooltip-icon,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}.luzmo-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}:host([has-submenu]:hover) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}}:host([has-submenu][focused]) .angle,:host([has-submenu]:focus) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .luzmo-Menu-backButton{outline:var(--focus-indicator-width) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{text-align:initial;font-family:var(--luzmo-menu-item-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}:host([has-submenu][disabled]) .angle{color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}#button{position:absolute;top:0;right:0;bottom:0;left:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors: active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}.menu-item-tooltip-container{grid-area:actionsArea;align-self:center;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));display:flex;align-items:center;justify-content:center}.menu-item-tooltip-container luzmo-tooltip{--tooltip-font-size: var( --luzmo-menu-item-tooltip-font-size, var(--tooltip-font-size) )}.menu-item-tooltip-icon-trigger{cursor:default;display:flex;align-items:center;justify-content:center}.menu-item-tooltip-icon{font-size:.875rem;width:.875rem;height:.875rem}';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const POINTERLEAVE_TIMEOUT = 100;
+const checkIcon = (classes) => lit.html`
+  <span class="icon-container icon checkmark ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoCheck)}
   </span>
-`,V=r=>l.x`
-  <span class="icon-container icon angle ${r.join(" ")}">
-    ${d.p3(d.S,{className:"indicator"})}
+`;
+const angleIcon = (classes) => lit.html`
+  <span class="icon-container icon angle ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoAngleRight, { className: "indicator" })}
   </span>
-`,K=r=>l.x`
-  <span class="icon-container icon info ${r.join(" ")}">
-    ${d.p3(d.p1)}
+`;
+const infoIcon = (classes) => lit.html`
+  <span class="icon-container icon info ${classes.join(" ")}">
+    ${icons.luzmoIcon(icons.luzmoInfoCircleOutline)}
   </span>
-`;class x extends Event{constructor(e){super("luzmo-menu-item-added-or-updated",{bubbles:!0,composed:!0}),this.menuCascade=new WeakMap,this.clear(e)}get item(){return this._item}clear(e){this._item=e,this.currentAncestorWithSelects=void 0,e.menuData={cleanupSteps:[],focusRoot:void 0,selectionRoot:void 0,parentMenu:void 0},this.menuCascade=new WeakMap}}class s extends C.LikeAnchor(D.ObserveSlotText(P.ObserveSlotPresence(A.Focusable,'[slot="icon"]'))){constructor(){super(),this.active=!1,this.dependencyManager=new R.DependencyManagerController(this),this.focused=!1,this.selected=!1,this._value="",this.hasSubmenu=!1,this.tooltipPlacement="top",this.noWrap=!1,this.renderAngleIcon=(e=[])=>V(e),this.renderCheckIcon=(e=[])=>W(e),this.renderInfoIcon=(e=[])=>K(e),this.open=!1,this.handleSlottableRequest=e=>{var t;(t=this.submenuElement)==null||t.dispatchEvent(new O.SlottableRequestEvent(e.name,e.data))},this.proxyFocus=()=>{this.focus()},this.handleBeforetoggle=e=>{e.newState==="closed"&&(this.open=!0,this.overlayElement.manuallyKeepOpen(),this.overlayElement.removeEventListener("beforetoggle",this.handleBeforetoggle))},this.recentlyLeftChild=!1,this.willDispatchUpdate=!1,this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},this.addEventListener("click",this.handleClickCapture,{capture:!0}),new M.s(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:e=>{e.every(o=>o.target.slot==="submenu")||this.breakItemChildrenCache()}})}static get styles(){return[l.r(F)]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((e,t)=>e+(t.textContent||"").trim(),"")}renderTooltip(){return this.tooltip?(this.dependencyManager.add("luzmo-tooltip"),this.dependencyManager.add("luzmo-overlay"),Promise.resolve().then(()=>require("../tooltip/index.cjs")),Promise.resolve().then(()=>require("../overlay/index.cjs")),l.x`
+`;
+class MenuItemAddedOrUpdatedEvent extends Event {
+  constructor(item) {
+    super("luzmo-menu-item-added-or-updated", {
+      bubbles: true,
+      composed: true
+    });
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
+    this.clear(item);
+  }
+  get item() {
+    return this._item;
+  }
+  clear(item) {
+    this._item = item;
+    this.currentAncestorWithSelects = void 0;
+    item.menuData = {
+      cleanupSteps: [],
+      focusRoot: void 0,
+      selectionRoot: void 0,
+      parentMenu: void 0
+    };
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
+  }
+}
+class LuzmoMenuItem extends likeAnchor.LikeAnchor(
+  observeSlotText.ObserveSlotText(observeSlotPresence.ObserveSlotPresence(focusable.Focusable, '[slot="icon"]'))
+) {
+  constructor() {
+    super();
+    this.active = false;
+    this.dependencyManager = new dependencyManger.DependencyManagerController(this);
+    this.focused = false;
+    this.selected = false;
+    this._value = "";
+    this.hasSubmenu = false;
+    this.tooltipPlacement = "top";
+    this.noWrap = false;
+    this.renderAngleIcon = (classes = []) => angleIcon(classes);
+    this.renderCheckIcon = (classes = []) => checkIcon(classes);
+    this.renderInfoIcon = (classes = []) => infoIcon(classes);
+    this.open = false;
+    this.handleSlottableRequest = (event) => {
+      var _a;
+      (_a = this.submenuElement) == null ? void 0 : _a.dispatchEvent(
+        new slottableRequestEvent.SlottableRequestEvent(event.name, event.data)
+      );
+    };
+    this.proxyFocus = () => {
+      this.focus();
+    };
+    this.handleBeforetoggle = (event) => {
+      if (event.newState === "closed") {
+        this.open = true;
+        this.overlayElement.manuallyKeepOpen();
+        this.overlayElement.removeEventListener(
+          "beforetoggle",
+          this.handleBeforetoggle
+        );
+      }
+    };
+    this.recentlyLeftChild = false;
+    this.willDispatchUpdate = false;
+    this.menuData = {
+      focusRoot: void 0,
+      parentMenu: void 0,
+      selectionRoot: void 0,
+      cleanupSteps: []
+    };
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true
+    });
+    new mutationController_js.MutationController(this, {
+      config: {
+        characterData: true,
+        childList: true,
+        subtree: true
+      },
+      callback: (mutations) => {
+        const isSubmenu = mutations.every(
+          (mutation) => mutation.target.slot === "submenu"
+        );
+        if (isSubmenu) {
+          return;
+        }
+        this.breakItemChildrenCache();
+      }
+    });
+  }
+  static get styles() {
+    return [lit.unsafeCSS(menuItemStyles)];
+  }
+  get value() {
+    return this._value || this.itemText;
+  }
+  set value(value) {
+    if (value === this._value) {
+      return;
+    }
+    this._value = value || "";
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
+    }
+  }
+  /**
+   * @private
+   */
+  get itemText() {
+    return this.itemChildren.content.reduce(
+      (acc, node) => acc + (node.textContent || "").trim(),
+      ""
+    );
+  }
+  renderTooltip() {
+    if (!this.tooltip) {
+      return lit.nothing;
+    }
+    this.dependencyManager.add("luzmo-tooltip");
+    this.dependencyManager.add("luzmo-overlay");
+    Promise.resolve().then(() => require("../tooltip/index.cjs"));
+    Promise.resolve().then(() => require("../overlay/index.cjs"));
+    return lit.html`
       <div class="menu-item-tooltip-container">
         <!-- The visible icon that acts as trigger -->
         <div
@@ -64,38 +1009,117 @@
           <luzmo-tooltip> ${this.tooltip} </luzmo-tooltip>
         </luzmo-overlay>
       </div>
-    `):l.E}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const e=this.iconSlot.assignedElements().map(o=>{const i=o.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),t=this.contentSlot.assignedNodes().map(o=>o.cloneNode(!0));return this._itemChildren={icon:e,content:t},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}shouldProxyClick(){let e=!1;return this.anchorElement&&(this.anchorElement.click(),e=!0),e}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}renderSubmenu(){const e=l.x`
+    `;
+  }
+  get focusElement() {
+    return this;
+  }
+  get hasIcon() {
+    return this.slotContentIsPresent;
+  }
+  get itemChildren() {
+    if (!this.iconSlot || !this.contentSlot) {
+      return {
+        icon: [],
+        content: []
+      };
+    }
+    if (this._itemChildren) {
+      return this._itemChildren;
+    }
+    const icon = this.iconSlot.assignedElements().map((element) => {
+      const newElement = element.cloneNode(true);
+      newElement.removeAttribute("slot");
+      newElement.classList.toggle("icon");
+      return newElement;
+    });
+    const content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+    this._itemChildren = { icon, content };
+    return this._itemChildren;
+  }
+  click() {
+    if (this.disabled) {
+      return;
+    }
+    if (this.shouldProxyClick()) {
+      return;
+    }
+    super.click();
+  }
+  handleClickCapture(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+  shouldProxyClick() {
+    let handled = false;
+    if (this.anchorElement) {
+      this.anchorElement.click();
+      handled = true;
+    }
+    return handled;
+  }
+  breakItemChildrenCache() {
+    this._itemChildren = void 0;
+    this.triggerUpdate();
+  }
+  renderSubmenu() {
+    const slot = lit.html`
       <slot
         name="submenu"
         @slotchange=${this.manageSubmenu}
-        @luzmo-menu-item-added-or-updated=${{handleEvent:t=>{t.clear(t.item)},capture:!0}}
-        @focusin=${t=>t.stopPropagation()}
+        @luzmo-menu-item-added-or-updated=${{
+      handleEvent: (event) => {
+        event.clear(event.item);
+      },
+      capture: true
+    }}
+        @focusin=${(event) => event.stopPropagation()}
       ></slot>
-    `;return this.hasSubmenu?(this.dependencyManager.add("luzmo-overlay"),this.dependencyManager.add("luzmo-popover"),Promise.resolve().then(()=>require("../overlay-KSKMzzkh.cjs")).then(t=>t.overlay),Promise.resolve().then(()=>require("../popover-KFfO0IYL.cjs")),l.x`
+    `;
+    if (!this.hasSubmenu) {
+      return slot;
+    }
+    this.dependencyManager.add("luzmo-overlay");
+    this.dependencyManager.add("luzmo-popover");
+    Promise.resolve().then(() => require("../overlay-LViy9VWM.cjs")).then((n) => n.overlay);
+    Promise.resolve().then(() => require("../popover-BkgUf0kL.cjs"));
+    return lit.html`
       <luzmo-overlay
         .triggerElement=${this}
         ?disabled=${!this.hasSubmenu}
-        ?open=${this.hasSubmenu&&this.open&&this.dependencyManager.loaded}
-        .placement=${this.isLTR?"right-start":"left-start"}
-        .offset=${[-10,-5]}
+        ?open=${this.hasSubmenu && this.open && this.dependencyManager.loaded}
+        .placement=${this.isLTR ? "right-start" : "left-start"}
+        .offset=${[-10, -5]}
         .type=${"auto"}
-        @close=${t=>t.stopPropagation()}
+        @close=${(event) => event.stopPropagation()}
         @slottable-request=${this.handleSlottableRequest}
       >
         <luzmo-popover
-          @change=${t=>{this.handleSubmenuChange(t),this.open=!1}}
+          @change=${(event) => {
+      this.handleSubmenuChange(event);
+      this.open = false;
+    }}
           @pointerenter=${this.handleSubmenuPointerenter}
           @pointerleave=${this.handleSubmenuPointerleave}
-          @luzmo-menu-item-added-or-updated=${t=>t.stopPropagation()}
+          @luzmo-menu-item-added-or-updated=${(event) => event.stopPropagation()}
         >
-          ${e}
+          ${slot}
         </luzmo-popover>
       </luzmo-overlay>
       ${this.renderAngleIcon()}
-    `):e}render(){return l.x`
-      ${this.selected?l.x`
-            ${this.renderCheckIcon(this.hasIcon?["checkmark--withAdjacentIcon"]:[])}
-          `:l.E}
+    `;
+  }
+  render() {
+    return lit.html`
+      ${this.selected ? lit.html`
+            ${this.renderCheckIcon(
+      this.hasIcon ? ["checkmark--withAdjacentIcon"] : []
+    )}
+          ` : lit.nothing}
       <slot name="icon"></slot>
       <div id="label">
         <slot id="slot"></slot>
@@ -103,6 +1127,250 @@
       <slot name="description"></slot>
       <slot name="value"></slot>
       ${this.renderTooltip()}
-      ${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):l.E}
+      ${this.href && this.href.length > 0 ? super.renderAnchor({
+      id: "button",
+      ariaHidden: true,
+      className: "button anchor hidden"
+    }) : lit.nothing}
       ${this.renderSubmenu()}
-    `}manageSubmenu(e){this.submenuElement=e.target.assignedElements({flatten:!0})[0],this.hasSubmenu=!!this.submenuElement,this.hasSubmenu&&this.setAttribute("aria-haspopup","true")}handlePointerdown(e){e.target===this&&this.hasSubmenu&&this.open&&(this.addEventListener("focus",this.handleSubmenuFocus,{once:!0}),this.overlayElement.addEventListener("beforetoggle",this.handleBeforetoggle))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerenter",this.closeOverlaysForRoot),this.hasAttribute("id")||(this.id=`luzmo-menu-item-${k.randomID()}`)}closeOverlaysForRoot(){var e;this.open||(e=this.menuData.parentMenu)==null||e.closeDescendentOverlays()}handleSubmenuClick(e){e.composedPath().includes(this.overlayElement)||this.openOverlay()}handleSubmenuFocus(){requestAnimationFrame(()=>{this.overlayElement.open=this.open})}handlePointerenter(){if(this.leaveTimeout){clearTimeout(this.leaveTimeout),delete this.leaveTimeout;return}this.openOverlay()}handlePointerleave(){this.open&&!this.recentlyLeftChild&&(this.leaveTimeout=setTimeout(()=>{delete this.leaveTimeout,this.open=!1},N))}handleSubmenuChange(e){var t;e.stopPropagation(),(t=this.menuData.selectionRoot)==null||t.selectOrToggleItem(this)}handleSubmenuPointerenter(){this.recentlyLeftChild=!0}handleSubmenuPointerleave(){requestAnimationFrame(()=>{this.recentlyLeftChild=!1})}handleSubmenuOpen(e){this.focused=!1;const t=e.composedPath().find(o=>o!==this.overlayElement&&o.localName==="luzmo-overlay");this.overlayElement.parentOverlayToForceClose=t}cleanup(){this.open=!1,this.active=!1}openOverlay(){!this.hasSubmenu||this.open||this.disabled||(this.open=!0,this.active=!0,this.setAttribute("aria-expanded","true"),this.addEventListener("luzmo-closed",this.cleanup,{once:!0}))}updateAriaSelected(){const e=this.getAttribute("role");e==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):(e==="menuitemcheckbox"||e==="menuitemradio")&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(e){this.setAttribute("role",e),this.updateAriaSelected()}updated(e){var t,o;if(super.updated(e),e.has("label")&&(this.label||e.get("label")!==void 0)&&this.setAttribute("aria-label",this.label||""),e.has("active")&&(this.active||e.get("active")!==void 0)&&this.active&&((t=this.menuData.selectionRoot)==null||t.closeDescendentOverlays()),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),e.has("selected")&&this.updateAriaSelected(),e.has("hasSubmenu")&&(this.hasSubmenu||e.get("hasSubmenu")!==void 0))if(this.hasSubmenu){this.abortControllerSubmenu=new AbortController;const i={signal:this.abortControllerSubmenu.signal};this.addEventListener("click",this.handleSubmenuClick,i),this.addEventListener("pointerenter",this.handlePointerenter,i),this.addEventListener("pointerleave",this.handlePointerleave,i),this.addEventListener("luzmo-opened",this.handleSubmenuOpen,i)}else(o=this.abortControllerSubmenu)==null||o.abort()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}disconnectedCallback(){this.menuData.cleanupSteps.forEach(e=>e(this)),this.menuData={focusRoot:void 0,parentMenu:void 0,selectionRoot:void 0,cleanupSteps:[]},super.disconnectedCallback()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(e=>requestAnimationFrame(e)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.dispatchEvent(new x(this)),this.willDispatchUpdate=!1)}}c([l.n({type:Boolean,reflect:!0})],s.prototype,"active",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"focused",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"selected",2);c([l.n({type:String})],s.prototype,"value",1);c([l.n({type:Boolean,reflect:!0,attribute:"has-submenu"})],s.prototype,"hasSubmenu",2);c([l.n({type:String})],s.prototype,"tooltip",2);c([l.n({type:String,attribute:"tooltip-placement"})],s.prototype,"tooltipPlacement",2);c([f.e("slot:not([name])")],s.prototype,"contentSlot",2);c([f.e('slot[name="icon"]')],s.prototype,"iconSlot",2);c([l.n({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],s.prototype,"noWrap",2);c([f.e(".anchor")],s.prototype,"anchorElement",2);c([f.e("luzmo-overlay")],s.prototype,"overlayElement",2);c([l.n({type:Boolean,reflect:!0})],s.prototype,"open",2);customElements.get("luzmo-menu")||customElements.define("luzmo-menu",u);customElements.get("luzmo-menu-divider")||customElements.define("luzmo-menu-divider",I);customElements.get("luzmo-menu-group")||customElements.define("luzmo-menu-group",g);customElements.get("luzmo-menu-item")||customElements.define("luzmo-menu-item",s);exports.LuzmoMenu=u;exports.LuzmoMenuDivider=I;exports.LuzmoMenuGroup=g;exports.LuzmoMenuItem=s;exports.MenuItemAddedOrUpdatedEvent=x;
+    `;
+  }
+  manageSubmenu(event) {
+    this.submenuElement = event.target.assignedElements({
+      flatten: true
+    })[0];
+    this.hasSubmenu = !!this.submenuElement;
+    if (this.hasSubmenu) {
+      this.setAttribute("aria-haspopup", "true");
+    }
+  }
+  handlePointerdown(event) {
+    if (event.target === this && this.hasSubmenu && this.open) {
+      this.addEventListener("focus", this.handleSubmenuFocus, {
+        once: true
+      });
+      this.overlayElement.addEventListener(
+        "beforetoggle",
+        this.handleBeforetoggle
+      );
+    }
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
+    if (!this.hasAttribute("id")) {
+      this.id = `luzmo-menu-item-${randomId.randomID()}`;
+    }
+  }
+  closeOverlaysForRoot() {
+    var _a;
+    if (this.open) {
+      return;
+    }
+    (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
+  }
+  handleSubmenuClick(event) {
+    if (event.composedPath().includes(this.overlayElement)) {
+      return;
+    }
+    this.openOverlay();
+  }
+  handleSubmenuFocus() {
+    requestAnimationFrame(() => {
+      this.overlayElement.open = this.open;
+    });
+  }
+  handlePointerenter() {
+    if (this.leaveTimeout) {
+      clearTimeout(this.leaveTimeout);
+      delete this.leaveTimeout;
+      return;
+    }
+    this.openOverlay();
+  }
+  handlePointerleave() {
+    if (this.open && !this.recentlyLeftChild) {
+      this.leaveTimeout = setTimeout(() => {
+        delete this.leaveTimeout;
+        this.open = false;
+      }, POINTERLEAVE_TIMEOUT);
+    }
+  }
+  /**
+   * When there is a `change` event in the submenu for this item
+   * then we "click" this item to cascade the selection up the
+   * menu tree allowing all submenus between the initial selection
+   * and the root of the tree to have their selection changes and
+   * be closed.
+   */
+  handleSubmenuChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
+  }
+  handleSubmenuPointerenter() {
+    this.recentlyLeftChild = true;
+  }
+  handleSubmenuPointerleave() {
+    requestAnimationFrame(() => {
+      this.recentlyLeftChild = false;
+    });
+  }
+  handleSubmenuOpen(event) {
+    this.focused = false;
+    const parentOverlay = event.composedPath().find(
+      (el) => el !== this.overlayElement && el.localName === "luzmo-overlay"
+    );
+    this.overlayElement.parentOverlayToForceClose = parentOverlay;
+  }
+  cleanup() {
+    this.open = false;
+    this.active = false;
+  }
+  openOverlay() {
+    if (!this.hasSubmenu || this.open || this.disabled) {
+      return;
+    }
+    this.open = true;
+    this.active = true;
+    this.setAttribute("aria-expanded", "true");
+    this.addEventListener("luzmo-closed", this.cleanup, {
+      once: true
+    });
+  }
+  updateAriaSelected() {
+    const role = this.getAttribute("role");
+    if (role === "option") {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
+      this.setAttribute("aria-checked", this.selected ? "true" : "false");
+    }
+  }
+  setRole(role) {
+    this.setAttribute("role", role);
+    this.updateAriaSelected();
+  }
+  updated(changes) {
+    var _a, _b;
+    super.updated(changes);
+    if (changes.has("label") && (this.label || changes.get("label") !== void 0)) {
+      this.setAttribute("aria-label", this.label || "");
+    }
+    if (changes.has("active") && (this.active || changes.get("active") !== void 0) && this.active) {
+      (_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
+    }
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+    if (changes.has("selected")) {
+      this.updateAriaSelected();
+    }
+    if (changes.has("hasSubmenu") && (this.hasSubmenu || changes.get("hasSubmenu") !== void 0)) {
+      if (this.hasSubmenu) {
+        this.abortControllerSubmenu = new AbortController();
+        const options = { signal: this.abortControllerSubmenu.signal };
+        this.addEventListener("click", this.handleSubmenuClick, options);
+        this.addEventListener("pointerenter", this.handlePointerenter, options);
+        this.addEventListener("pointerleave", this.handlePointerleave, options);
+        this.addEventListener("luzmo-opened", this.handleSubmenuOpen, options);
+      } else {
+        (_b = this.abortControllerSubmenu) == null ? void 0 : _b.abort();
+      }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.triggerUpdate();
+  }
+  disconnectedCallback() {
+    this.menuData.cleanupSteps.forEach((removal) => removal(this));
+    this.menuData = {
+      focusRoot: void 0,
+      parentMenu: void 0,
+      selectionRoot: void 0,
+      cleanupSteps: []
+    };
+    super.disconnectedCallback();
+  }
+  async triggerUpdate() {
+    if (this.willDispatchUpdate) {
+      return;
+    }
+    this.willDispatchUpdate = true;
+    await new Promise((ready) => requestAnimationFrame(ready));
+    this.dispatchUpdate();
+  }
+  dispatchUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
+    this.willDispatchUpdate = false;
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "active", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "focused", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoMenuItem.prototype, "value", 1);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "has-submenu" })
+], LuzmoMenuItem.prototype, "hasSubmenu", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoMenuItem.prototype, "tooltip", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "tooltip-placement" })
+], LuzmoMenuItem.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  decorators_js.query("slot:not([name])")
+], LuzmoMenuItem.prototype, "contentSlot", 2);
+__decorateClass([
+  decorators_js.query('slot[name="icon"]')
+], LuzmoMenuItem.prototype, "iconSlot", 2);
+__decorateClass([
+  decorators_js.property({
+    type: Boolean,
+    reflect: true,
+    attribute: "no-wrap",
+    hasChanged() {
+      return false;
+    }
+  })
+], LuzmoMenuItem.prototype, "noWrap", 2);
+__decorateClass([
+  decorators_js.query(".anchor")
+], LuzmoMenuItem.prototype, "anchorElement", 2);
+__decorateClass([
+  decorators_js.query("luzmo-overlay")
+], LuzmoMenuItem.prototype, "overlayElement", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMenuItem.prototype, "open", 2);
+if (!customElements.get("luzmo-menu")) {
+  customElements.define("luzmo-menu", LuzmoMenu);
+}
+if (!customElements.get("luzmo-menu-divider")) {
+  customElements.define("luzmo-menu-divider", LuzmoMenuDivider);
+}
+if (!customElements.get("luzmo-menu-group")) {
+  customElements.define("luzmo-menu-group", LuzmoMenuGroup);
+}
+if (!customElements.get("luzmo-menu-item")) {
+  customElements.define("luzmo-menu-item", LuzmoMenuItem);
+}
+exports.LuzmoMenu = LuzmoMenu;
+exports.LuzmoMenuDivider = LuzmoMenuDivider;
+exports.LuzmoMenuGroup = LuzmoMenuGroup;
+exports.LuzmoMenuItem = LuzmoMenuItem;
+exports.MenuItemAddedOrUpdatedEvent = MenuItemAddedOrUpdatedEvent;