@m3e/web 2.5.10 → 2.5.11

package/dist/menu.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as s,nothing as n,html as o,unsafeCSS as r,css as a}from"lit";import{query as l,state as c,property as h}from"lit/decorators.js";import{KeyboardClick as m,Focusable as d,AttachInternals as u,Disabled as p,FocusController as f,isLinkButtonMixin as v,renderPseudoLink as b,DesignToken as g,HtmlFor as k,ActionElementBase as w,customElement as y,LinkButton as $,Role as E,HoverController as x,setCustomState as M,hasAssignedNodes as L,SuppressInitialAnimation as C,ScrollController as _,deleteCustomState as W,addCustomState as T,registerStyleSheet as S,Checked as A,prefersReducedMotion as P}from"@m3e/web/core";import{addAriaReferencedId as D,removeAriaReferencedId as z,RovingTabIndexManager as I}from"@m3e/web/core/a11y";import{positionAnchor as O}from"@m3e/web/core/anchoring";import{M3eDirectionality as R}from"@m3e/web/core/bidi";class U extends(m(d(u(p(s),!0)))){constructor(){super(),new f(this,{callback:e=>{e&&this.menu?._activate()}})}get menu(){return this.closest("m3e-menu")}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${v(this)?this[b]():n}<div class="wrapper">${this._renderContent()}</div></div>`}}U.styles=a`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${g.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${g.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${g.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${g.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${g.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${g.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${g.shape.corner.extraSmall}); transition: ${r(`border-radius ${g.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${g.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${g.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${g.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`,e([l(".focus-ring")],U.prototype,"_focusRing",void 0),e([l(".state-layer")],U.prototype,"_stateLayer",void 0),e([l(".ripple")],U.prototype,"_ripple",void 0);let Y=class extends(k(w)){get menu(){return"M3E-MENU"===this.control?.tagName?this.control:null}attach(e){super.attach(e);const t=this.menu;t&&(this.parentElement&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",t.id&&D(this.parentElement,"aria-controls",t.id)),this.closest("m3e-menu")&&(t.submenu=!0))}detach(){if(this.parentElement){this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null;const e=this.menu;e?.id&&z(this.parentElement,"aria-controls",e.id)}super.detach()}_onClick(){this.parentElement&&("M3E-MENU-ITEM"===this.parentElement.tagName?this.menu?.show(this.parentElement):this.menu?.toggle(this.parentElement))}};var B,H,K,N,Z,X,j,q,G,V,F,J;Y=e([y("m3e-menu-trigger")],Y);let Q=J=class extends($(E(U,"menuitem"))){constructor(){super(),B.add(this),H.set(this,e=>t(this,B,"m",G).call(this,e)),K.set(this,e=>t(this,B,"m",V).call(this,e)),N.set(this,()=>t(this,B,"m",F).call(this)),this._hasSubmenu=!1,Z.set(this,void 0),new x(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&t(this,Z,"f")&&t(this,Z,"f").menu?.show(this)}})}get submenu(){return t(this,Z,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,H,"f")),this.addEventListener("keydown",t(this,K,"f")),this.addEventListener("mouseenter",t(this,N,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,H,"f")),this.removeEventListener("keydown",t(this,K,"f")),this.removeEventListener("mouseenter",t(this,N,"f"))}_renderContent(){return o`<slot name="icon" aria-hidden="true" @slotchange="${t(this,B,"m",j)}"></slot><span class="content"><slot @slotchange="${t(this,B,"m",X)}"></slot></span>${this._hasSubmenu?"ltr"===R.current?o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M400-280v-400l200 200-200 200Z"/></svg>`:o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M560-280 360-480l200-200v400Z"/></svg>`:o`<slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,B,"m",q)}"></slot>`}`}};var ee,te,ie,se,ne,oe,re,ae,le,ce,he,me,de,ue,pe,fe;H=new WeakMap,K=new WeakMap,N=new WeakMap,Z=new WeakMap,B=new WeakSet,X=function(e){i(this,Z,e.target.assignedElements({flatten:!0}).find(e=>e instanceof Y),"f"),this._hasSubmenu=void 0!==t(this,Z,"f")},j=function(e){M(this,"--with-icon",L(e.target))},q=function(e){M(this,"--with-trailing-icon",L(e.target))},G=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},V=function(e){if(!e.defaultPrevented&&!this.disabled)switch(e.key){case"Right":case"ArrowRight":"ltr"===R.current&&(e.preventDefault(),this.submenu?.show(this));break;case"Left":case"ArrowLeft":"rtl"===R.current&&(e.preventDefault(),this.submenu?.show(this))}},F=function(){this.menu?.items.forEach(e=>{e instanceof J&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},e([c()],Q.prototype,"_hasSubmenu",void 0),Q=J=e([y("m3e-menu-item")],Q);let ve=fe=class extends(C(u(E(s,"menu")))){constructor(){super(...arguments),ee.add(this),te.set(this,void 0),ie.set(this,void 0),se.set(this,(new I).withWrap().withHomeAndEnd().withVerticalOrientation()),ne.set(this,e=>t(this,ee,"m",he).call(this,e)),oe.set(this,()=>t(this,ee,"m",me).call(this)),re.set(this,e=>t(this,ee,"m",de).call(this,e)),ae.set(this,new _(this,{target:null,callback:e=>e instanceof fe?e.items.filter(e=>e instanceof Q).forEach(e=>e.submenu?.hide()):this.hideAll()})),le.set(this,e=>{"closed"===e.newState?(t(this,ie,"f")?.call(this),i(this,ie,void 0,"f")):setTimeout(()=>{t(this,se,"f").setActiveItem(t(this,se,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.variant="standard",this.submenu=!1}get items(){return t(this,se,"f").items}get isOpen(){return void 0!==t(this,te,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",t(this,ne,"f")),this.addEventListener("mouseenter",t(this,oe,"f")),this.addEventListener("toggle",t(this,le,"f")),document.addEventListener("click",t(this,re,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",t(this,ne,"f")),this.removeEventListener("mouseenter",t(this,oe,"f")),this.removeEventListener("toggle",t(this,le,"f")),document.removeEventListener("click",t(this,re,"f")),t(this,ee,"m",pe).call(this)}async show(e){t(this,te,"f")&&t(this,te,"f")!==e&&this.hide();let s=this.positionX;"rtl"===R.current&&(s="before"===s?"after":"before"),i(this,ie,await O(this,e,{position:this.submenu?"before"===s?"left-start":"right-start":"above"===this.positionY?"before"===s?"top-end":"top-start":"before"===s?"bottom-end":"bottom-start",inline:!0,flip:!0,shift:"main",offset:this.submenu?void 0:4},(e,i,s)=>{if(this.submenu){if(t(this,te,"f")){const e=t(this,ee,"m",ue).call(this,t(this,te,"f")).y;M(this,"--shift-down",!1),M(this,"--shift-up",!1),M(this,Math.round(i)===Math.round(e)?"--shift-down":"--shift-up",!0)}}else M(this,"--top",s.includes("top")),M(this,"--bottom",s.includes("bottom"));"rtl"===R.current?this.style.right=window.innerWidth-e-this.clientWidth+"px":this.style.left=`${e}px`,this.style.top=`${i}px`}),"f");const n=e.closest("m3e-menu");n?this.variant=n.variant:this._activate(),this.showPopover(),i(this,te,e,"f"),t(this,te,"f").ariaExpanded="true",t(this,ae,"f").observe(t(this,te,"f"))}hide(e=!1){for(const e of t(this,se,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}t(this,ee,"m",pe).call(this),this.hidePopover(),t(this,te,"f")&&(t(this,te,"f").ariaExpanded="false",e&&t(this,te,"f").focus(),t(this,ae,"f").unobserve(t(this,te,"f")),i(this,te,void 0,"f"))}hideAll(e=!1){let i=this;for(;t(i,te,"f");){const e=t(i,te,"f").closest("m3e-menu");if(!e)break;i=e}i.hide(e)}async toggle(e){t(this,te,"f")?this.hide():await this.show(e)}render(){return o`<div class="base"><slot @slotchange="${t(this,ee,"m",ce)}"></slot></div>`}_activate(){this!==fe.__activeMenu&&(fe.__activeMenu&&W(fe.__activeMenu,"--active"),fe.__activeMenu=this,T(fe.__activeMenu,"--active"))}};var be,ge,ke,we,ye,$e,Ee,xe,Me,Le,Ce,_e;te=new WeakMap,ie=new WeakMap,se=new WeakMap,ne=new WeakMap,oe=new WeakMap,re=new WeakMap,ae=new WeakMap,le=new WeakMap,ee=new WeakSet,ce=function(){const{added:e}=t(this,se,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));t(this,se,"f").activeItem||t(this,se,"f").updateActiveItem(e.find(e=>!e.disabled)),t(this,se,"f").items.forEach((e,i)=>{M(e,"--first",0===i&&!e.previousElementSibling),M(e,"--last",i===t(this,se,"f").items.length-1)})},he=function(e){switch(e.key){case"Right":case"ArrowRight":"rtl"===R.current?(e.preventDefault(),this.hide(!0)):t(this,se,"f").onKeyDown(e);break;case"Left":case"ArrowLeft":"ltr"===R.current?(e.preventDefault(),this.hide(!0)):t(this,se,"f").onKeyDown(e);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:t(this,se,"f").onKeyDown(e)}},me=function(){this._activate()},de=function(e){this.submenu||e.composedPath().some(e=>e instanceof fe||e===t(this,te,"f"))||this.hide()},ue=function(e){let t=0,i=0;for(let s=e;s;s=s.offsetParent instanceof HTMLElement?s.offsetParent:null)t+=s.offsetLeft-s.scrollLeft+s.clientLeft,i+=s.offsetTop-s.scrollTop+s.clientTop;return{x:t,y:i}},pe=function(){this===fe.__activeMenu&&(W(fe.__activeMenu,"--active"),fe.__activeMenu=void 0)},S(a`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`),ve.styles=a`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${g.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${g.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${g.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${g.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${g.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r(`opacity ${g.motion.duration.short2} ${g.motion.easing.standard}, \n        transform ${g.motion.duration.short2} ${g.motion.easing.standard},\n        overlay ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        display ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        border-radius ${g.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${g.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${g.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${g.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${g.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${g.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${g.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${g.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${g.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`,e([h({attribute:"position-x"})],ve.prototype,"positionX",void 0),e([h({attribute:"position-y"})],ve.prototype,"positionY",void 0),e([h({reflect:!0})],ve.prototype,"variant",void 0),e([h({type:Boolean,reflect:!0})],ve.prototype,"submenu",void 0),ve=fe=e([y("m3e-menu")],ve);let We=class extends(A(E(U,"menuitemcheckbox"))){constructor(){super(...arguments),be.add(this),ge.set(this,e=>t(this,be,"m",Me).call(this,e)),ke.set(this,e=>t(this,be,"m",Le).call(this,e)),we.set(this,()=>t(this,be,"m",Ce).call(this)),ye.set(this,()=>t(this,be,"m",_e).call(this)),$e.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,ge,"f")),this.addEventListener("keydown",t(this,ke,"f")),this.addEventListener("keyup",t(this,we,"f")),this.addEventListener("mouseenter",t(this,ye,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,ge,"f")),this.removeEventListener("keydown",t(this,ke,"f")),this.removeEventListener("keyup",t(this,we,"f")),this.removeEventListener("mouseenter",t(this,ye,"f"))}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,be,"m",Ee)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,be,"m",xe)}"></slot>`}};ge=new WeakMap,ke=new WeakMap,we=new WeakMap,ye=new WeakMap,$e=new WeakMap,be=new WeakSet,Ee=function(e){M(this,"--with-icon",L(e.target))},xe=function(e){M(this,"--with-trailing-icon",L(e.target))},Me=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),t(this,$e,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Le=function(e){i(this,$e," "===e.key,"f")},Ce=function(){i(this,$e,!1,"f")},_e=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},We.styles=[U.styles,a`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${g.motion.spring.fastEffects}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`],We=e([y("m3e-menu-item-checkbox")],We);let Te=class extends(E(s,"group")){render(){return o`<slot></slot>`}};var Se,Ae,Pe,De,ze,Ie,Oe,Re,Ue,Ye,Be,He;Te.styles=a`:host { display: contents; }`,Te=e([y("m3e-menu-item-group")],Te);let Ke=class extends(A(E(U,"menuitemradio"))){constructor(){super(...arguments),Se.add(this),Ae.set(this,e=>t(this,Se,"m",Ue).call(this,e)),Pe.set(this,e=>t(this,Se,"m",Ye).call(this,e)),De.set(this,()=>t(this,Se,"m",Be).call(this)),ze.set(this,()=>t(this,Se,"m",He).call(this)),Ie.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,Ae,"f")),this.addEventListener("keydown",t(this,Pe,"f")),this.addEventListener("keyup",t(this,De,"f")),this.addEventListener("mouseenter",t(this,ze,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,Ae,"f")),this.removeEventListener("keydown",t(this,Pe,"f")),this.removeEventListener("keyup",t(this,De,"f")),this.removeEventListener("mouseenter",t(this,ze,"f"))}update(e){super.update(e),e.has("checked")&&this.checked&&(this.closest("[role='group']")??this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(e=>{e!==this&&e.checked&&(e.checked=!1)})}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,Se,"m",Oe)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,Se,"m",Re)}"></slot>`}};Ae=new WeakMap,Pe=new WeakMap,De=new WeakMap,ze=new WeakMap,Ie=new WeakMap,Se=new WeakSet,Oe=function(e){M(this,"--with-icon",L(e.target))},Re=function(e){M(this,"--with-trailing-icon",L(e.target))},Ue=function(e){e.defaultPrevented||(this.checked=!0,this.performUpdate(),t(this,Ie,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Ye=function(e){i(this,Ie," "===e.key,"f")},Be=function(){i(this,Ie,!1,"f")},He=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},Ke.styles=We.styles,Ke=e([y("m3e-menu-item-radio")],Ke);export{ve as M3eMenuElement,We as M3eMenuItemCheckboxElement,Q as M3eMenuItemElement,Te as M3eMenuItemGroupElement,Ke as M3eMenuItemRadioElement,Y as M3eMenuTriggerElement};
+import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as n,nothing as s,html as o,unsafeCSS as r,css as a}from"lit";import{query as c,state as l,property as m}from"lit/decorators.js";import{KeyboardClick as h,Focusable as d,AttachInternals as u,Disabled as p,FocusController as f,isLinkButtonMixin as v,renderPseudoLink as b,DesignToken as g,HtmlFor as k,ActionElementBase as y,customElement as w,LinkButton as $,Role as E,HoverController as x,setCustomState as M,hasAssignedNodes as L,SuppressInitialAnimation as C,ScrollController as _,deleteCustomState as W,addCustomState as T,registerStyleSheet as S,Checked as A,prefersReducedMotion as P}from"@m3e/web/core";import{addAriaReferencedId as D,removeAriaReferencedId as z,RovingTabIndexManager as Y}from"@m3e/web/core/a11y";import{positionAnchor as I}from"@m3e/web/core/anchoring";import{M3eDirectionality as O}from"@m3e/web/core/bidi";class R extends(h(d(u(p(n),!0)))){constructor(){super(),new f(this,{callback:e=>{e&&this.menu?._activate()}})}get menu(){return this.closest("m3e-menu")}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${v(this)?this[b]():s}<div class="wrapper">${this._renderContent()}</div></div>`}}R.styles=a`:host { display: inline-block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-menu-item-container-height, 2.75rem) + ${g.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${g.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${g.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${g.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${g.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${g.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${g.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${g.shape.corner.extraSmall}); transition: ${r(`border-radius ${g.motion.spring.fastEffects}`)}; } :host([checked]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host([checked]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-menu-item-container-height, 2.75rem) + calc(var(--m3e-menu-gap, 0.125rem) * 2) + ${g.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${g.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${g.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${g.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`,e([c(".focus-ring")],R.prototype,"_focusRing",void 0),e([c(".state-layer")],R.prototype,"_stateLayer",void 0),e([c(".ripple")],R.prototype,"_ripple",void 0);let U=class extends(k(y)){get menu(){return"M3E-MENU"===this.control?.tagName?this.control:null}attach(e){super.attach(e);const t=this.menu;t&&(this.parentElement&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",t.id&&D(this.parentElement,"aria-controls",t.id)),this.closest("m3e-menu")&&(t.submenu=!0))}detach(){if(this.parentElement){this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null;const e=this.menu;e?.id&&z(this.parentElement,"aria-controls",e.id)}super.detach()}_onClick(){this.parentElement&&("M3E-MENU-ITEM"===this.parentElement.tagName?this.menu?.show(this.parentElement):this.menu?.toggle(this.parentElement))}};var B,H,K,N,Z,X,j,q,G,V,F,J;U=e([w("m3e-menu-trigger")],U);let Q=J=class extends($(E(R,"menuitem"))){constructor(){super(),B.add(this),H.set(this,e=>t(this,B,"m",G).call(this,e)),K.set(this,e=>t(this,B,"m",V).call(this,e)),N.set(this,()=>t(this,B,"m",F).call(this)),this._hasSubmenu=!1,Z.set(this,void 0),new x(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&t(this,Z,"f")&&t(this,Z,"f").menu?.show(this)}})}get submenu(){return t(this,Z,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,H,"f")),this.addEventListener("keydown",t(this,K,"f")),this.addEventListener("mouseenter",t(this,N,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,H,"f")),this.removeEventListener("keydown",t(this,K,"f")),this.removeEventListener("mouseenter",t(this,N,"f"))}_renderContent(){return o`<slot name="icon" aria-hidden="true" @slotchange="${t(this,B,"m",j)}"></slot><span class="content"><slot @slotchange="${t(this,B,"m",X)}"></slot></span>${this._hasSubmenu?"ltr"===O.current?o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M400-280v-400l200 200-200 200Z"/></svg>`:o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M560-280 360-480l200-200v400Z"/></svg>`:o`<slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,B,"m",q)}"></slot>`}`}};var ee,te,ie,ne,se,oe,re,ae,ce,le,me,he,de,ue,pe,fe;H=new WeakMap,K=new WeakMap,N=new WeakMap,Z=new WeakMap,B=new WeakSet,X=function(e){i(this,Z,e.target.assignedElements({flatten:!0}).find(e=>e instanceof U),"f"),this._hasSubmenu=void 0!==t(this,Z,"f")},j=function(e){M(this,"--with-icon",L(e.target))},q=function(e){M(this,"--with-trailing-icon",L(e.target))},G=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},V=function(e){if(!e.defaultPrevented&&!this.disabled)switch(e.key){case"Right":case"ArrowRight":"ltr"===O.current&&(e.preventDefault(),this.submenu?.show(this));break;case"Left":case"ArrowLeft":"rtl"===O.current&&(e.preventDefault(),this.submenu?.show(this))}},F=function(){this.menu?.items.forEach(e=>{e instanceof J&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},e([l()],Q.prototype,"_hasSubmenu",void 0),Q=J=e([w("m3e-menu-item")],Q);let ve=fe=class extends(C(u(E(n,"menu")))){constructor(){super(...arguments),ee.add(this),te.set(this,void 0),ie.set(this,void 0),ne.set(this,(new Y).withWrap().withHomeAndEnd().withVerticalOrientation()),se.set(this,e=>t(this,ee,"m",me).call(this,e)),oe.set(this,()=>t(this,ee,"m",he).call(this)),re.set(this,e=>t(this,ee,"m",de).call(this,e)),ae.set(this,new _(this,{target:null,callback:e=>e instanceof fe?e.items.filter(e=>e instanceof Q).forEach(e=>e.submenu?.hide()):this.hideAll()})),ce.set(this,e=>{"closed"===e.newState?(t(this,ie,"f")?.call(this),i(this,ie,void 0,"f")):setTimeout(()=>{t(this,ne,"f").setActiveItem(t(this,ne,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.variant="standard",this.submenu=!1}get items(){return t(this,ne,"f").items}get isOpen(){return void 0!==t(this,te,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",t(this,se,"f")),this.addEventListener("mouseenter",t(this,oe,"f")),this.addEventListener("toggle",t(this,ce,"f")),document.addEventListener("click",t(this,re,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",t(this,se,"f")),this.removeEventListener("mouseenter",t(this,oe,"f")),this.removeEventListener("toggle",t(this,ce,"f")),document.removeEventListener("click",t(this,re,"f")),t(this,ee,"m",pe).call(this)}async show(e){t(this,te,"f")&&t(this,te,"f")!==e&&this.hide();let n=this.positionX;"rtl"===O.current&&(n="before"===n?"after":"before"),i(this,ie,await I(this,e,{position:this.submenu?"before"===n?"left-start":"right-start":"above"===this.positionY?"before"===n?"top-end":"top-start":"before"===n?"bottom-end":"bottom-start",inline:!0,flip:!0,shift:"main",offset:this.submenu?void 0:4},(e,i,n)=>{if(this.submenu){if(t(this,te,"f")){const e=t(this,ee,"m",ue).call(this,t(this,te,"f")).y;M(this,"--shift-down",!1),M(this,"--shift-up",!1),M(this,Math.round(i)===Math.round(e)?"--shift-down":"--shift-up",!0)}}else M(this,"--top",n.includes("top")),M(this,"--bottom",n.includes("bottom"));"rtl"===O.current?this.style.right=window.innerWidth-e-this.clientWidth+"px":this.style.left=`${e}px`,this.style.top=`${i}px`}),"f");const s=e.closest("m3e-menu");s?this.variant=s.variant:this._activate(),this.showPopover(),i(this,te,e,"f"),t(this,te,"f").ariaExpanded="true",t(this,ae,"f").observe(t(this,te,"f"))}hide(e=!1){for(const e of t(this,ne,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}t(this,ee,"m",pe).call(this),this.hidePopover(),t(this,te,"f")&&(t(this,te,"f").ariaExpanded="false",e&&t(this,te,"f").focus(),t(this,ae,"f").unobserve(t(this,te,"f")),i(this,te,void 0,"f"))}hideAll(e=!1){let i=this;for(;t(i,te,"f");){const e=t(i,te,"f").closest("m3e-menu");if(!e)break;i=e}i.hide(e)}async toggle(e){t(this,te,"f")?this.hide():await this.show(e)}render(){return o`<div class="base"><slot @slotchange="${t(this,ee,"m",le)}"></slot></div>`}_activate(){this!==fe.__activeMenu&&(fe.__activeMenu&&W(fe.__activeMenu,"--active"),fe.__activeMenu=this,T(fe.__activeMenu,"--active"))}};var be,ge,ke,ye,we,$e,Ee,xe,Me,Le,Ce,_e;te=new WeakMap,ie=new WeakMap,ne=new WeakMap,se=new WeakMap,oe=new WeakMap,re=new WeakMap,ae=new WeakMap,ce=new WeakMap,ee=new WeakSet,le=function(){const{added:e}=t(this,ne,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));t(this,ne,"f").activeItem||t(this,ne,"f").updateActiveItem(e.find(e=>!e.disabled)),t(this,ne,"f").items.forEach((e,i)=>{M(e,"--first",0===i&&!e.previousElementSibling),M(e,"--last",i===t(this,ne,"f").items.length-1)})},me=function(e){switch(e.key){case"Right":case"ArrowRight":"rtl"===O.current?(e.preventDefault(),this.hide(!0)):t(this,ne,"f").onKeyDown(e);break;case"Left":case"ArrowLeft":"ltr"===O.current?(e.preventDefault(),this.hide(!0)):t(this,ne,"f").onKeyDown(e);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:t(this,ne,"f").onKeyDown(e)}},he=function(){this._activate()},de=function(e){this.submenu||e.composedPath().some(e=>e instanceof fe||e===t(this,te,"f"))||this.hide()},ue=function(e){let t=0,i=0;for(let n=e;n;n=n.offsetParent instanceof HTMLElement?n.offsetParent:null)t+=n.offsetLeft-n.scrollLeft+n.clientLeft,i+=n.offsetTop-n.scrollTop+n.clientTop;return{x:t,y:i}},pe=function(){this===fe.__activeMenu&&(W(fe.__activeMenu,"--active"),fe.__activeMenu=void 0)},S(a`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`),ve.styles=a`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${g.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${g.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${g.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${g.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${g.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r(`opacity ${g.motion.duration.short2} ${g.motion.easing.standard}, \n        transform ${g.motion.duration.short2} ${g.motion.easing.standard},\n        overlay ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        display ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        border-radius ${g.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); animation: ${r(`bounce-open ${g.motion.duration.medium1} ${g.motion.easing.standard}`)}; } @keyframes bounce-open { 0% { transform: scaleY(0.8); } 70% { transform: scaleY(1.02); } 100% { transform: scaleY(1); } } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:is(:state(--bottom), :--bottom)) { transform-origin: top; } :host(:is(:state(--top), :--top)) { transform-origin: bottom; } :host(:is(:state(--shift-down), :--shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:is(:state(--shift-up), :--shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${g.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${g.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${g.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${g.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${g.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${g.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${g.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${g.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`,e([m({attribute:"position-x"})],ve.prototype,"positionX",void 0),e([m({attribute:"position-y"})],ve.prototype,"positionY",void 0),e([m({reflect:!0})],ve.prototype,"variant",void 0),e([m({type:Boolean,reflect:!0})],ve.prototype,"submenu",void 0),ve=fe=e([w("m3e-menu")],ve);let We=class extends(A(E(R,"menuitemcheckbox"))){constructor(){super(...arguments),be.add(this),ge.set(this,e=>t(this,be,"m",Me).call(this,e)),ke.set(this,e=>t(this,be,"m",Le).call(this,e)),ye.set(this,()=>t(this,be,"m",Ce).call(this)),we.set(this,()=>t(this,be,"m",_e).call(this)),$e.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,ge,"f")),this.addEventListener("keydown",t(this,ke,"f")),this.addEventListener("keyup",t(this,ye,"f")),this.addEventListener("mouseenter",t(this,we,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,ge,"f")),this.removeEventListener("keydown",t(this,ke,"f")),this.removeEventListener("keyup",t(this,ye,"f")),this.removeEventListener("mouseenter",t(this,we,"f"))}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,be,"m",Ee)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,be,"m",xe)}"></slot>`}};ge=new WeakMap,ke=new WeakMap,ye=new WeakMap,we=new WeakMap,$e=new WeakMap,be=new WeakSet,Ee=function(e){M(this,"--with-icon",L(e.target))},xe=function(e){M(this,"--with-trailing-icon",L(e.target))},Me=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),t(this,$e,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Le=function(e){i(this,$e," "===e.key,"f")},Ce=function(){i(this,$e,!1,"f")},_e=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},We.styles=[R.styles,a`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${g.motion.spring.fastEffects}; } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`],We=e([w("m3e-menu-item-checkbox")],We);let Te=class extends(E(n,"group")){render(){return o`<slot></slot>`}};var Se,Ae,Pe,De,ze,Ye,Ie,Oe,Re,Ue,Be,He;Te.styles=a`:host { display: contents; }`,Te=e([w("m3e-menu-item-group")],Te);let Ke=class extends(A(E(R,"menuitemradio"))){constructor(){super(...arguments),Se.add(this),Ae.set(this,e=>t(this,Se,"m",Re).call(this,e)),Pe.set(this,e=>t(this,Se,"m",Ue).call(this,e)),De.set(this,()=>t(this,Se,"m",Be).call(this)),ze.set(this,()=>t(this,Se,"m",He).call(this)),Ye.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,Ae,"f")),this.addEventListener("keydown",t(this,Pe,"f")),this.addEventListener("keyup",t(this,De,"f")),this.addEventListener("mouseenter",t(this,ze,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,Ae,"f")),this.removeEventListener("keydown",t(this,Pe,"f")),this.removeEventListener("keyup",t(this,De,"f")),this.removeEventListener("mouseenter",t(this,ze,"f"))}update(e){super.update(e),e.has("checked")&&this.checked&&(this.closest("[role='group']")??this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(e=>{e!==this&&e.checked&&(e.checked=!1)})}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,Se,"m",Ie)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,Se,"m",Oe)}"></slot>`}};Ae=new WeakMap,Pe=new WeakMap,De=new WeakMap,ze=new WeakMap,Ye=new WeakMap,Se=new WeakSet,Ie=function(e){M(this,"--with-icon",L(e.target))},Oe=function(e){M(this,"--with-trailing-icon",L(e.target))},Re=function(e){e.defaultPrevented||(this.checked=!0,this.performUpdate(),t(this,Ye,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Ue=function(e){i(this,Ye," "===e.key,"f")},Be=function(){i(this,Ye,!1,"f")},He=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},Ke.styles=We.styles,Ke=e([w("m3e-menu-item-radio")],Ke);export{ve as M3eMenuElement,We as M3eMenuItemCheckboxElement,Q as M3eMenuItemElement,Te as M3eMenuItemGroupElement,Ke as M3eMenuItemRadioElement,U as M3eMenuTriggerElement};
 //# sourceMappingURL=menu.min.js.map

package/dist/menu.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.min.js","sources":["../../src/menu/MenuItemElementBase.ts","../../src/menu/MenuTriggerElement.ts","../../src/menu/MenuItemElement.ts","../../src/menu/MenuElement.ts","../../src/menu/MenuItemCheckboxElement.ts","../../src/menu/MenuItemGroupElement.ts","../../src/menu/MenuItemRadioElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  FocusController,\r\n  isLinkButtonMixin,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\n\r\n/** A base implementation for an item of a menu. This class must be inherited. */\r\nexport abstract class MenuItemElementBase extends KeyboardClick(\r\n  Focusable(AttachInternals(Disabled(LitElement), true)),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-menu-item-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-expanded=\"true\"])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled)[aria-expanded=\"true\"]) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-menu-item-active-state-layer-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-menu-active-state-layer-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-expanded=\"true\"]) .state-layer {\r\n      display: none;\r\n    }\r\n\r\n    :host(:not(:disabled)[checked]) .base {\r\n      color: var(--m3e-menu-item-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-menu-item-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([checked]:not(:is(:state(--first), :--first))) .base {\r\n      border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([checked]:not(:is(:state(--last), :--last))) .base {\r\n      border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--first), :--first)) .base {\r\n      border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--last), :--last)) .base {\r\n      border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem);\r\n      padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem);\r\n      font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-menu-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-menu-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-menu-item-focus-ring-shape, inherit);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"trailing-icon\"]),\r\n    .trailing-icon {\r\n      flex: none;\r\n      width: 1em;\r\n      font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new FocusController(this, {\r\n      callback: (focused) => {\r\n        if (focused) {\r\n          this.menu?._activate();\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The menu to which this item belongs. */\r\n  get menu(): M3eMenuElement | null {\r\n    return this.closest(\"m3e-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}\r\n      <div class=\"wrapper\">${this._renderContent()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal Renders the content of the item. */\r\n  protected abstract _renderContent(): unknown;\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-trigger` component is used to open a menu when nested within a clickable element\r\n * such as a button or menu item. It anchors the menu to its invoker, enabling contextual flows and\r\n * nested hierarchies.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-trigger\r\n *\r\n * @slot - Renders the contents of the trigger.\r\n */\r\n@customElement(\"m3e-menu-trigger\")\r\nexport class M3eMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eMenuElement | null {\r\n    return this.control?.tagName === \"M3E-MENU\" ? <M3eMenuElement>this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    const menu = this.menu;\r\n    if (menu) {\r\n      if (this.parentElement) {\r\n        this.parentElement.ariaHasPopup = \"menu\";\r\n        this.parentElement.ariaExpanded = \"false\";\r\n        if (menu.id) {\r\n          addAriaReferencedId(this.parentElement, \"aria-controls\", menu.id);\r\n        }\r\n      }\r\n      if (this.closest(\"m3e-menu\")) {\r\n        menu.submenu = true;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n\r\n      const menu = this.menu;\r\n      if (menu?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", menu.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      if (this.parentElement.tagName === \"M3E-MENU-ITEM\") {\r\n        this.menu?.show(this.parentElement);\r\n      } else {\r\n        this.menu?.toggle(this.parentElement);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-trigger\": M3eMenuTriggerElement;\r\n  }\r\n}\r\n","import { html } from \"lit\";\r\nimport { state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, hasAssignedNodes, HoverController, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\nimport { M3eMenuTriggerElement } from \"./MenuTriggerElement\";\r\n\r\n/**\r\n * An item of a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-item` component represents a single actionable item within a menu, supporting standard\r\n * click behavior, optional link semantics, and flexible icon placement for navigation, commands, or\r\n * contextual actions. It behaves as a button or link depending on its attributes, and can trigger a submenu\r\n * when a nested `m3e-menu-trigger` is present—enabling hierarchical flows.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - Whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant.\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item\")\r\nexport class M3eMenuItemElement extends LinkButton(Role(MenuItemElementBase, \"menuitem\")) {\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n\r\n  /** @private */ @state() private _hasSubmenu = false;\r\n  /** @private */ #submenuTrigger?: M3eMenuTriggerElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, {\r\n      startDelay: 500,\r\n      endDelay: 500,\r\n      callback: (hovering) => {\r\n        if (hovering && !this.disabled && this.#submenuTrigger) {\r\n          this.#submenuTrigger.menu?.show(this);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The submenu triggered by the item. */\r\n  get submenu(): M3eMenuElement | null {\r\n    return this.#submenuTrigger?.menu ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html`<slot name=\"icon\" aria-hidden=\"true\" @slotchange=\"${this.#iconSlotChangeHandler}\"></slot>\r\n      <span class=\"content\"><slot @slotchange=\"${this.#defaultSlotChangeHandler}\"></slot></span>\r\n      ${this._hasSubmenu\r\n        ? M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"trailing-icon\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M400-280v-400l200 200-200 200Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"trailing-icon\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M560-280 360-480l200-200v400Z\" />\r\n            </svg>`\r\n        : html`<slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#trailingIconSlotChangeHandler}\">\r\n          </slot>`}`;\r\n  }\r\n\r\n  /** @private */\r\n  #defaultSlotChangeHandler(e: Event): void {\r\n    this.#submenuTrigger = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eMenuTriggerElement);\r\n    this._hasSubmenu = this.#submenuTrigger !== undefined;\r\n  }\r\n\r\n  /** @private */\r\n  #iconSlotChangeHandler(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #trailingIconSlotChangeHandler(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented && !this._hasSubmenu) {\r\n      this.menu?.hideAll(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented || this.disabled) return;\r\n\r\n    switch (e.key) {\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          e.preventDefault();\r\n          this.submenu?.show(this);\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          e.preventDefault();\r\n          this.submenu?.show(this);\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item !== this && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item\": M3eMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  DesignToken,\r\n  ScrollController,\r\n  Role,\r\n  AttachInternals,\r\n  addCustomState,\r\n  setCustomState,\r\n  deleteCustomState,\r\n  customElement,\r\n  SuppressInitialAnimation,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuPositionX, MenuPositionY } from \"./MenuPosition\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\nimport { MenuVariant } from \"./MenuVariant\";\r\n\r\n/**\r\n * Presents a list of choices on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-menu` component presents a list of choices on a temporary surface, typically anchored to a trigger element.\r\n * It supports dynamic positioning via `position-x` and `position-y` attributes, and renders its contents through the default slot.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr position-x - The position of the menu, on the x-axis.\r\n * @attr position-y - The position of the menu, on the y-axis.\r\n * @attr variant - The appearance variant of the menu.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-menu-container-shape - Controls the corner radius of the menu container.\r\n * @cssprop --m3e-menu-active-container-shape - Controls the corner radius of the menu container when active.\r\n * @cssprop --m3e-menu-container-min-width - Minimum width of the menu container.\r\n * @cssprop --m3e-menu-container-max-width - Maximum width of the menu container.\r\n * @cssprop --m3e-menu-container-max-height - Maximum height of the menu container.\r\n * @cssprop --m3e-menu-container-padding-block - Vertical padding inside the menu container.\r\n * @cssprop --m3e-menu-container-padding-inline - Horizontal padding inside the menu container.\r\n * @cssprop --m3e-menu-container-color - Background color of the menu container.\r\n * @cssprop --m3e-menu-container-elevation - Box shadow elevation of the menu container.\r\n * @cssprop --m3e-vibrant-menu-container-color - Background color of the menu container for vibrant variant.\r\n * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-menu-gap - Gap between content in the menu.\r\n */\r\n@customElement(\"m3e-menu\")\r\nexport class M3eMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-menu > m3e-divider {\r\n        margin-block: var(--m3e-menu-divider-spacing, 0.5rem);\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow-y: auto;\r\n      overflow-x: visible;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scroll-padding-block: calc(\r\n        var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem)\r\n      );\r\n      min-width: var(--m3e-menu-container-min-width, 7rem);\r\n      max-width: var(--m3e-menu-container-max-width, 17.5rem);\r\n      max-height: var(--m3e-menu-container-max-height, 17.5rem);\r\n      box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-menu-gap, 0.125rem);\r\n      min-width: inherit;\r\n      max-width: inherit;\r\n      padding-block: var(--m3e-menu-container-padding-block, 0.25rem);\r\n      padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem);\r\n      --m3e-focus-ring-outward-offset: 0px;\r\n      --m3e-focus-ring-growth-factor: 1.5;\r\n    }\r\n    :host(:not(:is(:state(--active), :--active))) {\r\n      border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small});\r\n    }\r\n    :host(:not(:is(:state(--active), :--active))) .base {\r\n      --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall};\r\n      --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall};\r\n    }\r\n    :host(:is(:state(--active), :--active)) {\r\n      border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        border-radius ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([submenu])) {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:not([submenu]):popover-open) {\r\n      transform: scaleY(1);\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      display: block;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    :host(:is(:state(--shift-down), :--shift-down)) {\r\n      margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem));\r\n    }\r\n    :host(:is(:state(--shift-up), :--shift-up)) {\r\n      margin-top: var(--m3e-menu-container-padding-block, 0.25rem);\r\n    }\r\n    :host([variant=\"vibrant\"]) {\r\n      background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken.color.onTertiaryContainer});\r\n      --m3e-menu-item-container-hover-color: var(\r\n        --m3e-vibrant-menu-item-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-container-focus-color: var(\r\n        --m3e-vibrant-menu-item-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n      --m3e-menu-item-active-state-layer-color: var(\r\n        --m3e-vibrant-menu-item-active-state-layer-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken.color.onTertiary});\r\n      --m3e-menu-item-selected-container-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-color,\r\n        ${DesignToken.color.tertiary}\r\n      );\r\n\r\n      --m3e-menu-item-selected-container-hover-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-container-selected-focus-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-selected-ripple-color: var(\r\n        --m3e-vibrant-menu-item-selected-ripple-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-disabled-color: var(\r\n        --m3e-vibrant-menu-item-disabled-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:not([submenu]):popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        outline: 1px solid MenuText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __activeMenu?: M3eMenuElement;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #listManager = new RovingTabIndexManager<MenuItemElementBase>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: (target) =>\r\n      target instanceof M3eMenuElement\r\n        ? target.items.filter((x) => x instanceof M3eMenuItemElement).forEach((x) => x.submenu?.hide())\r\n        : this.hideAll(),\r\n  });\r\n\r\n  /** @private */ readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The position of the menu, on the x-axis.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"position-x\" }) positionX: MenuPositionX = \"after\";\r\n\r\n  /**\r\n   * The position of the menu, on the y-axis.\r\n   * @default \"below\"\r\n   */\r\n  @property({ attribute: \"position-y\" }) positionY: MenuPositionY = \"below\";\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: MenuVariant = \"standard\";\r\n\r\n  /** The items of the menu. */\r\n  get items(): ReadonlyArray<MenuItemElementBase> {\r\n    return this.#listManager.items;\r\n  }\r\n\r\n  /** A value indicating whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** A value indicating whether the menu is a submenu. */\r\n  @property({ type: Boolean, reflect: true }) submenu = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n\r\n    this.#deactivate();\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    let positionX = this.positionX;\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      positionX = positionX === \"before\" ? \"after\" : \"before\";\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: this.submenu\r\n          ? positionX === \"before\"\r\n            ? \"left-start\"\r\n            : \"right-start\"\r\n          : this.positionY === \"above\"\r\n            ? positionX === \"before\"\r\n              ? \"top-end\"\r\n              : \"top-start\"\r\n            : positionX === \"before\"\r\n              ? \"bottom-end\"\r\n              : \"bottom-start\",\r\n        inline: true,\r\n        flip: true,\r\n        shift: \"main\",\r\n        offset: !this.submenu ? 4 : undefined,\r\n      },\r\n      (x, y, position) => {\r\n        if (!this.submenu) {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n        } else if (this.#trigger) {\r\n          const top = this.#getAbsolutePosition(this.#trigger).y;\r\n          setCustomState(this, \"--shift-down\", false);\r\n          setCustomState(this, \"--shift-up\", false);\r\n          setCustomState(this, Math.round(y) === Math.round(top) ? \"--shift-down\" : \"--shift-up\", true);\r\n        }\r\n\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    const parent = trigger.closest(\"m3e-menu\");\r\n    if (parent) {\r\n      this.variant = parent.variant;\r\n    } else {\r\n      this._activate();\r\n    }\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    for (const item of this.#listManager.items) {\r\n      const submenu = (<M3eMenuItemElement>item).submenu;\r\n      if (submenu && submenu.isOpen) {\r\n        submenu.hide();\r\n      }\r\n    }\r\n\r\n    this.#deactivate();\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Closes this menu and any parenting menus.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hideAll(restoreFocus: boolean = false): void {\r\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\r\n    let menu: M3eMenuElement = this;\r\n    while (menu.#trigger) {\r\n      const parent = menu.#trigger.closest(\"m3e-menu\");\r\n      if (!parent) {\r\n        break;\r\n      }\r\n      menu = parent;\r\n    }\r\n    menu.hide(restoreFocus);\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems(\r\n      [\r\n        ...this.querySelectorAll<MenuItemElementBase>(\"m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio\"),\r\n      ].filter((x) => x.closest(\"m3e-menu\") === this),\r\n    );\r\n\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n\r\n    this.#listManager.items.forEach((x, i) => {\r\n      setCustomState(x, \"--first\", i === 0 && !x.previousElementSibling);\r\n      setCustomState(x, \"--last\", i === this.#listManager.items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          e.preventDefault();\r\n          this.hide(true);\r\n        } else {\r\n          this.#listManager.onKeyDown(e);\r\n        }\r\n\r\n        break;\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          e.preventDefault();\r\n          this.hide(true);\r\n        } else {\r\n          this.#listManager.onKeyDown(e);\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Tab\":\r\n        this.hideAll();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this._activate();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!this.submenu && !e.composedPath().some((x) => x instanceof M3eMenuElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #getAbsolutePosition(element: HTMLElement): { x: number; y: number } {\r\n    let x = 0,\r\n      y = 0;\r\n\r\n    for (\r\n      let current: HTMLElement | null = element;\r\n      current;\r\n      current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null\r\n    ) {\r\n      x += current.offsetLeft - current.scrollLeft + current.clientLeft;\r\n      y += current.offsetTop - current.scrollTop + current.clientTop;\r\n    }\r\n\r\n    return { x, y };\r\n  }\r\n\r\n  /** @internal */\r\n  _activate(): void {\r\n    if (this !== M3eMenuElement.__activeMenu) {\r\n      if (M3eMenuElement.__activeMenu) {\r\n        deleteCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n      }\r\n      M3eMenuElement.__activeMenu = this;\r\n      addCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #deactivate(): void {\r\n    if (this === M3eMenuElement.__activeMenu) {\r\n      deleteCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n      M3eMenuElement.__activeMenu = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eMenuElement {\r\n  addEventListener<K extends keyof M3eMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu\": M3eMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  prefersReducedMotion,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\n\r\n/**\r\n * An item of a menu which supports a checkable state.\r\n *\r\n * @description\r\n * The `m3e-menu-item-checkbox` component represents a menu item that supports an independent checkable state.\r\n * It allows users to toggle options on or off without affecting other items in the menu, making it ideal for\r\n * multi-select scenarios such as filters, visibility toggles, or feature flags. This component encodes a persistent\r\n * selection contract and can coexist with other checkbox or radio items within the same menu.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-menu-item-checkbox` to present multiple independent checkable\r\n * items in a menu.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu\">Format</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu\">\r\n *   <m3e-menu-item-checkbox>Bold</m3e-menu-item-checkbox>\r\n *   <m3e-menu-item-checkbox>Italic</m3e-menu-item-checkbox>\r\n *   <m3e-menu-item-checkbox>Underline</m3e-menu-item-checkbox>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item-checkbox\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr checked - Whether the element is checked.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item-checkbox\")\r\nexport class M3eMenuItemCheckboxElement extends Checked(Role(MenuItemElementBase, \"menuitemcheckbox\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    MenuItemElementBase.styles,\r\n    css`\r\n      .icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n      }\r\n      :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n        margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem));\r\n      }\r\n      .check {\r\n        width: 1em;\r\n        font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important;\r\n      }\r\n      :host(:not([checked])) .check {\r\n        display: none;\r\n      }\r\n      :host([checked]) .icon {\r\n        margin-inline-start: 0;\r\n      }\r\n      :host([checked]) ::slotted([slot=\"icon\"]) {\r\n        display: none !important;\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        .icon {\r\n          transition: none;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @internal */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @internal */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @internal */ readonly #keyUpHandler = () => this.#handleKeyUp();\r\n  /** @internal */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n  /** @internal */ #spacePressed = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html` <div class=\"icon\">\r\n        <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n        </svg>\r\n        <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>\r\n      <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @internal */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @internal */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.checked = !this.checked;\r\n      this.performUpdate();\r\n\r\n      if (!this.#spacePressed) {\r\n        if (!prefersReducedMotion()) {\r\n          setTimeout(() => this.menu?.hideAll(true), 150);\r\n        } else {\r\n          this.menu?.hideAll(true);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @internal */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#spacePressed = e.key === \" \";\r\n  }\r\n\r\n  /** @internal */\r\n  #handleKeyUp(): void {\r\n    this.#spacePressed = false;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-checkbox\": M3eMenuItemCheckboxElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Groups related items (such a radios) in a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-item-group` component groups related items within a menu, establishing a shared\r\n * context for interaction and selection. It enables separation of concerns—such as organizing radio\r\n * items into mutually exclusive sets.\r\n *\r\n * @tag m3e-menu-item-group\r\n *\r\n * @slot - Renders the contents of the group.\r\n */\r\n@customElement(\"m3e-menu-item-group\")\r\nexport class M3eMenuItemGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-group\": M3eMenuItemGroupElement;\r\n  }\r\n}\r\n","import { CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport { Checked, customElement, hasAssignedNodes, prefersReducedMotion, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eMenuItemCheckboxElement } from \"./MenuItemCheckboxElement\";\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\n\r\n/**\r\n * An item of a menu which supports a mutually exclusive checkable state.\r\n *\r\n * @description\r\n * The `m3e-menu-item-radio` component represents a selectable menu item that participates in a mutually exclusive group.\r\n * It reflects a singular choice within a shared context—such as sort order, theme selection, or view mode—and updates\r\n * group state when selected. This component can be nested within an `m3e-menu-item-group`, allowing multiple exclusive\r\n * groups to coexist within a single menu.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-menu-item-radio` in a `m3e-menu` to allow a user to select a sort order.\r\n * The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *  <m3e-menu-trigger for=\"menu\">Sort order</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu\">\r\n *  <m3e-menu-item-radio>Ascending</m3e-menu-item-radio>\r\n *  <m3e-menu-item-radio>Descending</m3e-menu-item-radio>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item-radio\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr checked - Whether the element is checked.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item-radio\")\r\nexport class M3eMenuItemRadioElement extends Checked(Role(MenuItemElementBase, \"menuitemradio\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = M3eMenuItemCheckboxElement.styles;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = () => this.#handleKeyUp();\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n\r\n  /** @private */ #spacePressed = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\") && this.checked) {\r\n      (this.closest(\"[role='group']\") ?? this.closest(\"m3e-menu\"))\r\n        ?.querySelectorAll(\"m3e-menu-item-radio\")\r\n        .forEach((x) => {\r\n          if (x !== this && x.checked) {\r\n            x.checked = false;\r\n          }\r\n        });\r\n    }\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html` <div class=\"icon\">\r\n        <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n        </svg>\r\n        <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>\r\n      <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.checked = true;\r\n      this.performUpdate();\r\n\r\n      if (!this.#spacePressed) {\r\n        if (!prefersReducedMotion()) {\r\n          setTimeout(() => this.menu?.hideAll(true), 150);\r\n        } else {\r\n          this.menu?.hideAll(true);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#spacePressed = e.key === \" \";\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(): void {\r\n    this.#spacePressed = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-radio\": M3eMenuItemRadioElement;\r\n  }\r\n}\r\n"],"names":["MenuItemElementBase","KeyboardClick","Focusable","AttachInternals","Disabled","LitElement","constructor","super","FocusController","this","callback","focused","menu","_activate","closest","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","isLinkButtonMixin","renderPseudoLink","nothing","_renderContent","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","M3eMenuTriggerElement","HtmlFor","ActionElementBase","control","tagName","parentElement","ariaHasPopup","ariaExpanded","id","addAriaReferencedId","submenu","detach","removeAriaReferencedId","_onClick","show","toggle","customElement","M3eMenuItemElement","M3eMenuItemElement_1","LinkButton","Role","_M3eMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eMenuItemElement_keyDownHandler","_M3eMenuItemElement_mouseEnterHandler","_M3eMenuItemElement_instances","_M3eMenuItemElement_handleMouseEnter","_hasSubmenu","_M3eMenuItemElement_submenuTrigger","HoverController","startDelay","endDelay","hovering","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_M3eMenuItemElement_iconSlotChangeHandler","_M3eMenuItemElement_defaultSlotChangeHandler","M3eDirectionality","current","_M3eMenuItemElement_trailingIconSlotChangeHandler","__classPrivateFieldSet","target","assignedElements","flatten","find","undefined","setCustomState","hasAssignedNodes","defaultPrevented","hideAll","key","preventDefault","items","item","isOpen","hide","state","M3eMenuElement","M3eMenuElement_1","SuppressInitialAnimation","_M3eMenuElement_trigger","_M3eMenuElement_anchorCleanup","_M3eMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eMenuElement_keyDownHandler","_M3eMenuElement_mouseEnterHandler","_M3eMenuElement_instances","_M3eMenuElement_handleMouseEnter","_M3eMenuElement_documentClickHandler","_M3eMenuElement_scrollController","ScrollController","filter","_M3eMenuElement_toggleHandler","newState","setTimeout","setActiveItem","positionX","positionY","variant","tabIndex","setAttribute","document","_M3eMenuElement_deactivate","trigger","positionAnchor","position","inline","flip","shift","offset","y","top","Math","round","includes","style","right","window","innerWidth","clientWidth","left","parent","showPopover","observe","restoreFocus","hidePopover","focus","unobserve","_M3eMenuElement_handleSlotChange","__activeMenu","deleteCustomState","addCustomState","added","setItems","querySelectorAll","activeItem","updateActiveItem","i","previousElementSibling","length","onKeyDown","shiftKey","ctrlKey","composedPath","some","element","offsetParent","HTMLElement","offsetLeft","scrollLeft","clientLeft","offsetTop","scrollTop","clientTop","registerStyleSheet","scrollbar","thinWidth","elevation","level3","small","duration","short2","easing","onTertiary","tertiary","surfaceContainer","property","attribute","reflect","type","Boolean","M3eMenuItemCheckboxElement","Checked","_M3eMenuItemCheckboxElement_clickHandler","_M3eMenuItemCheckboxElement_keyDownHandler","_M3eMenuItemCheckboxElement_keyUpHandler","_M3eMenuItemCheckboxElement_instances","_M3eMenuItemCheckboxElement_handleKeyUp","_M3eMenuItemCheckboxElement_mouseEnterHandler","_M3eMenuItemCheckboxElement_handleMouseEnter","_M3eMenuItemCheckboxElement_spacePressed","_M3eMenuItemCheckboxElement_handleIconSlotChange","_M3eMenuItemCheckboxElement_handleTrailingIconSlotChange","checked","performUpdate","prefersReducedMotion","M3eMenuItemGroupElement","M3eMenuItemRadioElement","_M3eMenuItemRadioElement_clickHandler","_M3eMenuItemRadioElement_keyDownHandler","_M3eMenuItemRadioElement_keyUpHandler","_M3eMenuItemRadioElement_instances","_M3eMenuItemRadioElement_handleKeyUp","_M3eMenuItemRadioElement_mouseEnterHandler","_M3eMenuItemRadioElement_handleMouseEnter","_M3eMenuItemRadioElement_spacePressed","update","changedProperties","has","_M3eMenuItemRadioElement_handleIconSlotChange","_M3eMenuItemRadioElement_handleTrailingIconSlotChange"],"mappings":"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"}
+{"version":3,"file":"menu.min.js","sources":["../../src/menu/MenuItemElementBase.ts","../../src/menu/MenuTriggerElement.ts","../../src/menu/MenuItemElement.ts","../../src/menu/MenuElement.ts","../../src/menu/MenuItemCheckboxElement.ts","../../src/menu/MenuItemGroupElement.ts","../../src/menu/MenuItemRadioElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  FocusController,\r\n  isLinkButtonMixin,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\n\r\n/** A base implementation for an item of a menu. This class must be inherited. */\r\nexport abstract class MenuItemElementBase extends KeyboardClick(\r\n  Focusable(AttachInternals(Disabled(LitElement), true)),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: calc(var(--m3e-menu-item-container-height, 2.75rem) + ${DesignToken.density.calc(-3)});\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-expanded=\"true\"])) .base {\r\n      --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled)[aria-expanded=\"true\"]) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-menu-item-active-state-layer-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-menu-active-state-layer-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([aria-expanded=\"true\"]) .state-layer {\r\n      display: none;\r\n    }\r\n\r\n    :host(:not(:disabled)[checked]) .base {\r\n      color: var(--m3e-menu-item-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-menu-item-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n    }\r\n    :host([checked]) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-menu-item-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([checked]:not(:is(:state(--first), :--first))) .base {\r\n      border-top-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([checked]:not(:is(:state(--last), :--last))) .base {\r\n      border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--first), :--first)) .base {\r\n      border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:is(:state(--last), :--last)) .base {\r\n      border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: calc(\r\n        var(--m3e-menu-item-container-height, 2.75rem) + calc(var(--m3e-menu-gap, 0.125rem) * 2) +\r\n          ${DesignToken.density.calc(-3)}\r\n      );\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem);\r\n      padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem);\r\n      font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-menu-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-menu-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-menu-item-focus-ring-shape, inherit);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"trailing-icon\"]),\r\n    .trailing-icon {\r\n      flex: none;\r\n      width: 1em;\r\n      font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new FocusController(this, {\r\n      callback: (focused) => {\r\n        if (focused) {\r\n          this.menu?._activate();\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The menu to which this item belongs. */\r\n  get menu(): M3eMenuElement | null {\r\n    return this.closest(\"m3e-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}\r\n      <div class=\"wrapper\">${this._renderContent()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal Renders the content of the item. */\r\n  protected abstract _renderContent(): unknown;\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-trigger` component is used to open a menu when nested within a clickable element\r\n * such as a button or menu item. It anchors the menu to its invoker, enabling contextual flows and\r\n * nested hierarchies.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-trigger\r\n *\r\n * @slot - Renders the contents of the trigger.\r\n */\r\n@customElement(\"m3e-menu-trigger\")\r\nexport class M3eMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eMenuElement | null {\r\n    return this.control?.tagName === \"M3E-MENU\" ? <M3eMenuElement>this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    const menu = this.menu;\r\n    if (menu) {\r\n      if (this.parentElement) {\r\n        this.parentElement.ariaHasPopup = \"menu\";\r\n        this.parentElement.ariaExpanded = \"false\";\r\n        if (menu.id) {\r\n          addAriaReferencedId(this.parentElement, \"aria-controls\", menu.id);\r\n        }\r\n      }\r\n      if (this.closest(\"m3e-menu\")) {\r\n        menu.submenu = true;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n\r\n      const menu = this.menu;\r\n      if (menu?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", menu.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      if (this.parentElement.tagName === \"M3E-MENU-ITEM\") {\r\n        this.menu?.show(this.parentElement);\r\n      } else {\r\n        this.menu?.toggle(this.parentElement);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-trigger\": M3eMenuTriggerElement;\r\n  }\r\n}\r\n","import { html } from \"lit\";\r\nimport { state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, hasAssignedNodes, HoverController, LinkButton, Role, setCustomState } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport type { M3eMenuElement } from \"./MenuElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\nimport { M3eMenuTriggerElement } from \"./MenuTriggerElement\";\r\n\r\n/**\r\n * An item of a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-item` component represents a single actionable item within a menu, supporting standard\r\n * click behavior, optional link semantics, and flexible icon placement for navigation, commands, or\r\n * contextual actions. It behaves as a button or link depending on its attributes, and can trigger a submenu\r\n * when a nested `m3e-menu-trigger` is present—enabling hierarchical flows.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - Whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant.\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item\")\r\nexport class M3eMenuItemElement extends LinkButton(Role(MenuItemElementBase, \"menuitem\")) {\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n\r\n  /** @private */ @state() private _hasSubmenu = false;\r\n  /** @private */ #submenuTrigger?: M3eMenuTriggerElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, {\r\n      startDelay: 500,\r\n      endDelay: 500,\r\n      callback: (hovering) => {\r\n        if (hovering && !this.disabled && this.#submenuTrigger) {\r\n          this.#submenuTrigger.menu?.show(this);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /** The submenu triggered by the item. */\r\n  get submenu(): M3eMenuElement | null {\r\n    return this.#submenuTrigger?.menu ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html`<slot name=\"icon\" aria-hidden=\"true\" @slotchange=\"${this.#iconSlotChangeHandler}\"></slot>\r\n      <span class=\"content\"><slot @slotchange=\"${this.#defaultSlotChangeHandler}\"></slot></span>\r\n      ${this._hasSubmenu\r\n        ? M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"trailing-icon\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M400-280v-400l200 200-200 200Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"trailing-icon\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M560-280 360-480l200-200v400Z\" />\r\n            </svg>`\r\n        : html`<slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#trailingIconSlotChangeHandler}\">\r\n          </slot>`}`;\r\n  }\r\n\r\n  /** @private */\r\n  #defaultSlotChangeHandler(e: Event): void {\r\n    this.#submenuTrigger = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof M3eMenuTriggerElement);\r\n    this._hasSubmenu = this.#submenuTrigger !== undefined;\r\n  }\r\n\r\n  /** @private */\r\n  #iconSlotChangeHandler(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #trailingIconSlotChangeHandler(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented && !this._hasSubmenu) {\r\n      this.menu?.hideAll(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented || this.disabled) return;\r\n\r\n    switch (e.key) {\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          e.preventDefault();\r\n          this.submenu?.show(this);\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          e.preventDefault();\r\n          this.submenu?.show(this);\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item !== this && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item\": M3eMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  DesignToken,\r\n  ScrollController,\r\n  Role,\r\n  AttachInternals,\r\n  addCustomState,\r\n  setCustomState,\r\n  deleteCustomState,\r\n  customElement,\r\n  SuppressInitialAnimation,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuPositionX, MenuPositionY } from \"./MenuPosition\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\nimport { MenuVariant } from \"./MenuVariant\";\r\n\r\n/**\r\n * Presents a list of choices on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-menu` component presents a list of choices on a temporary surface, typically anchored to a trigger element.\r\n * It supports dynamic positioning via `position-x` and `position-y` attributes, and renders its contents through the default slot.\r\n *\r\n * @example\r\n * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified\r\n * by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu1\">Basic menu</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu1\">\r\n *   <m3e-menu-item>Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>Green Apple</m3e-menu-item>\r\n *   <m3e-menu-item>Green Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu2\">Nested menus</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu2\">\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu3\">Fruits with A</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n *   <m3e-menu-item>Grapes</m3e-menu-item>\r\n *   <m3e-menu-item>Olive</m3e-menu-item>\r\n *   <m3e-menu-item>Orange</m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu3\">\r\n *   <m3e-menu-item>Apricot</m3e-menu-item>\r\n *   <m3e-menu-item>Avocado</m3e-menu-item>\r\n *   <m3e-menu-item>\r\n *     <m3e-menu-trigger for=\"menu4\">Apples</m3e-menu-trigger>\r\n *   </m3e-menu-item>\r\n * </m3e-menu>\r\n * <m3e-menu id=\"menu4\">\r\n *   <m3e-menu-item>Fuji</m3e-menu-item>\r\n *   <m3e-menu-item>Granny Smith</m3e-menu-item>\r\n *   <m3e-menu-item>Red Delicious</m3e-menu-item>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr position-x - The position of the menu, on the x-axis.\r\n * @attr position-y - The position of the menu, on the y-axis.\r\n * @attr variant - The appearance variant of the menu.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-menu-container-shape - Controls the corner radius of the menu container.\r\n * @cssprop --m3e-menu-active-container-shape - Controls the corner radius of the menu container when active.\r\n * @cssprop --m3e-menu-container-min-width - Minimum width of the menu container.\r\n * @cssprop --m3e-menu-container-max-width - Maximum width of the menu container.\r\n * @cssprop --m3e-menu-container-max-height - Maximum height of the menu container.\r\n * @cssprop --m3e-menu-container-padding-block - Vertical padding inside the menu container.\r\n * @cssprop --m3e-menu-container-padding-inline - Horizontal padding inside the menu container.\r\n * @cssprop --m3e-menu-container-color - Background color of the menu container.\r\n * @cssprop --m3e-menu-container-elevation - Box shadow elevation of the menu container.\r\n * @cssprop --m3e-vibrant-menu-container-color - Background color of the menu container for vibrant variant.\r\n * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-menu-gap - Gap between content in the menu.\r\n */\r\n@customElement(\"m3e-menu\")\r\nexport class M3eMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-menu > m3e-divider {\r\n        margin-block: var(--m3e-menu-divider-spacing, 0.5rem);\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow-y: auto;\r\n      overflow-x: visible;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scroll-padding-block: calc(\r\n        var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem)\r\n      );\r\n      min-width: var(--m3e-menu-container-min-width, 7rem);\r\n      max-width: var(--m3e-menu-container-max-width, 17.5rem);\r\n      max-height: var(--m3e-menu-container-max-height, 17.5rem);\r\n      box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-menu-gap, 0.125rem);\r\n      min-width: inherit;\r\n      max-width: inherit;\r\n      padding-block: var(--m3e-menu-container-padding-block, 0.25rem);\r\n      padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem);\r\n      --m3e-focus-ring-outward-offset: 0px;\r\n      --m3e-focus-ring-growth-factor: 1.5;\r\n    }\r\n    :host(:not(:is(:state(--active), :--active))) {\r\n      border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small});\r\n    }\r\n    :host(:not(:is(:state(--active), :--active))) .base {\r\n      --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall};\r\n      --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall};\r\n    }\r\n    :host(:is(:state(--active), :--active)) {\r\n      border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        border-radius ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([submenu])) {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:not([submenu]):popover-open) {\r\n      transform: scaleY(1);\r\n      animation: ${unsafeCSS(\r\n        `bounce-open ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    @keyframes bounce-open {\r\n      0% {\r\n        transform: scaleY(0.8);\r\n      }\r\n      70% {\r\n        transform: scaleY(1.02);\r\n      }\r\n      100% {\r\n        transform: scaleY(1);\r\n      }\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      display: block;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    :host(:is(:state(--shift-down), :--shift-down)) {\r\n      margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem));\r\n    }\r\n    :host(:is(:state(--shift-up), :--shift-up)) {\r\n      margin-top: var(--m3e-menu-container-padding-block, 0.25rem);\r\n    }\r\n    :host([variant=\"vibrant\"]) {\r\n      background-color: var(--m3e-vibrant-menu-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${DesignToken.color.onTertiaryContainer});\r\n      --m3e-menu-item-container-hover-color: var(\r\n        --m3e-vibrant-menu-item-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-container-focus-color: var(\r\n        --m3e-vibrant-menu-item-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n      --m3e-menu-item-active-state-layer-color: var(\r\n        --m3e-vibrant-menu-item-active-state-layer-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${DesignToken.color.onTertiary});\r\n      --m3e-menu-item-selected-container-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-color,\r\n        ${DesignToken.color.tertiary}\r\n      );\r\n\r\n      --m3e-menu-item-selected-container-hover-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-container-selected-focus-color: var(\r\n        --m3e-vibrant-menu-item-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-selected-ripple-color: var(\r\n        --m3e-vibrant-menu-item-selected-ripple-color,\r\n        ${DesignToken.color.onTertiary}\r\n      );\r\n      --m3e-menu-item-disabled-color: var(\r\n        --m3e-vibrant-menu-item-disabled-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n    }\r\n    :host([variant=\"standard\"]) {\r\n      background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        outline: 1px solid MenuText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __activeMenu?: M3eMenuElement;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /** @private */ readonly #listManager = new RovingTabIndexManager<MenuItemElementBase>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: (target) =>\r\n      target instanceof M3eMenuElement\r\n        ? target.items.filter((x) => x instanceof M3eMenuItemElement).forEach((x) => x.submenu?.hide())\r\n        : this.hideAll(),\r\n  });\r\n\r\n  /** @private */ readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The position of the menu, on the x-axis.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"position-x\" }) positionX: MenuPositionX = \"after\";\r\n\r\n  /**\r\n   * The position of the menu, on the y-axis.\r\n   * @default \"below\"\r\n   */\r\n  @property({ attribute: \"position-y\" }) positionY: MenuPositionY = \"below\";\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: MenuVariant = \"standard\";\r\n\r\n  /** The items of the menu. */\r\n  get items(): ReadonlyArray<MenuItemElementBase> {\r\n    return this.#listManager.items;\r\n  }\r\n\r\n  /** A value indicating whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** A value indicating whether the menu is a submenu. */\r\n  @property({ type: Boolean, reflect: true }) submenu = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n\r\n    this.#deactivate();\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    let positionX = this.positionX;\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      positionX = positionX === \"before\" ? \"after\" : \"before\";\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: this.submenu\r\n          ? positionX === \"before\"\r\n            ? \"left-start\"\r\n            : \"right-start\"\r\n          : this.positionY === \"above\"\r\n            ? positionX === \"before\"\r\n              ? \"top-end\"\r\n              : \"top-start\"\r\n            : positionX === \"before\"\r\n              ? \"bottom-end\"\r\n              : \"bottom-start\",\r\n        inline: true,\r\n        flip: true,\r\n        shift: \"main\",\r\n        offset: !this.submenu ? 4 : undefined,\r\n      },\r\n      (x, y, position) => {\r\n        if (!this.submenu) {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n        } else if (this.#trigger) {\r\n          const top = this.#getAbsolutePosition(this.#trigger).y;\r\n          setCustomState(this, \"--shift-down\", false);\r\n          setCustomState(this, \"--shift-up\", false);\r\n          setCustomState(this, Math.round(y) === Math.round(top) ? \"--shift-down\" : \"--shift-up\", true);\r\n        }\r\n\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    const parent = trigger.closest(\"m3e-menu\");\r\n    if (parent) {\r\n      this.variant = parent.variant;\r\n    } else {\r\n      this._activate();\r\n    }\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    for (const item of this.#listManager.items) {\r\n      const submenu = (<M3eMenuItemElement>item).submenu;\r\n      if (submenu && submenu.isOpen) {\r\n        submenu.hide();\r\n      }\r\n    }\r\n\r\n    this.#deactivate();\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Closes this menu and any parenting menus.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hideAll(restoreFocus: boolean = false): void {\r\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\r\n    let menu: M3eMenuElement = this;\r\n    while (menu.#trigger) {\r\n      const parent = menu.#trigger.closest(\"m3e-menu\");\r\n      if (!parent) {\r\n        break;\r\n      }\r\n      menu = parent;\r\n    }\r\n    menu.hide(restoreFocus);\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems(\r\n      [\r\n        ...this.querySelectorAll<MenuItemElementBase>(\"m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio\"),\r\n      ].filter((x) => x.closest(\"m3e-menu\") === this),\r\n    );\r\n\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n\r\n    this.#listManager.items.forEach((x, i) => {\r\n      setCustomState(x, \"--first\", i === 0 && !x.previousElementSibling);\r\n      setCustomState(x, \"--last\", i === this.#listManager.items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          e.preventDefault();\r\n          this.hide(true);\r\n        } else {\r\n          this.#listManager.onKeyDown(e);\r\n        }\r\n\r\n        break;\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          e.preventDefault();\r\n          this.hide(true);\r\n        } else {\r\n          this.#listManager.onKeyDown(e);\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Tab\":\r\n        this.hideAll();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this._activate();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!this.submenu && !e.composedPath().some((x) => x instanceof M3eMenuElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #getAbsolutePosition(element: HTMLElement): { x: number; y: number } {\r\n    let x = 0,\r\n      y = 0;\r\n\r\n    for (\r\n      let current: HTMLElement | null = element;\r\n      current;\r\n      current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null\r\n    ) {\r\n      x += current.offsetLeft - current.scrollLeft + current.clientLeft;\r\n      y += current.offsetTop - current.scrollTop + current.clientTop;\r\n    }\r\n\r\n    return { x, y };\r\n  }\r\n\r\n  /** @internal */\r\n  _activate(): void {\r\n    if (this !== M3eMenuElement.__activeMenu) {\r\n      if (M3eMenuElement.__activeMenu) {\r\n        deleteCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n      }\r\n      M3eMenuElement.__activeMenu = this;\r\n      addCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #deactivate(): void {\r\n    if (this === M3eMenuElement.__activeMenu) {\r\n      deleteCustomState(M3eMenuElement.__activeMenu, \"--active\");\r\n      M3eMenuElement.__activeMenu = undefined;\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eMenuElement {\r\n  addEventListener<K extends keyof M3eMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu\": M3eMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  prefersReducedMotion,\r\n  Role,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\n\r\n/**\r\n * An item of a menu which supports a checkable state.\r\n *\r\n * @description\r\n * The `m3e-menu-item-checkbox` component represents a menu item that supports an independent checkable state.\r\n * It allows users to toggle options on or off without affecting other items in the menu, making it ideal for\r\n * multi-select scenarios such as filters, visibility toggles, or feature flags. This component encodes a persistent\r\n * selection contract and can coexist with other checkbox or radio items within the same menu.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-menu-item-checkbox` to present multiple independent checkable\r\n * items in a menu.\r\n * ```html\r\n * <m3e-button>\r\n *   <m3e-menu-trigger for=\"menu\">Format</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu\">\r\n *   <m3e-menu-item-checkbox>Bold</m3e-menu-item-checkbox>\r\n *   <m3e-menu-item-checkbox>Italic</m3e-menu-item-checkbox>\r\n *   <m3e-menu-item-checkbox>Underline</m3e-menu-item-checkbox>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item-checkbox\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr checked - Whether the element is checked.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item-checkbox\")\r\nexport class M3eMenuItemCheckboxElement extends Checked(Role(MenuItemElementBase, \"menuitemcheckbox\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    MenuItemElementBase.styles,\r\n    css`\r\n      .icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n      }\r\n      :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n        margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem));\r\n      }\r\n      .check {\r\n        width: 1em;\r\n        font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important;\r\n      }\r\n      :host(:not([checked])) .check {\r\n        display: none;\r\n      }\r\n      :host([checked]) .icon {\r\n        margin-inline-start: 0;\r\n      }\r\n      :host([checked]) ::slotted([slot=\"icon\"]) {\r\n        display: none !important;\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        .icon {\r\n          transition: none;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @internal */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @internal */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @internal */ readonly #keyUpHandler = () => this.#handleKeyUp();\r\n  /** @internal */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n  /** @internal */ #spacePressed = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html` <div class=\"icon\">\r\n        <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n        </svg>\r\n        <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>\r\n      <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @internal */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @internal */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.checked = !this.checked;\r\n      this.performUpdate();\r\n\r\n      if (!this.#spacePressed) {\r\n        if (!prefersReducedMotion()) {\r\n          setTimeout(() => this.menu?.hideAll(true), 150);\r\n        } else {\r\n          this.menu?.hideAll(true);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @internal */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#spacePressed = e.key === \" \";\r\n  }\r\n\r\n  /** @internal */\r\n  #handleKeyUp(): void {\r\n    this.#spacePressed = false;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-checkbox\": M3eMenuItemCheckboxElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Groups related items (such a radios) in a menu.\r\n *\r\n * @description\r\n * The `m3e-menu-item-group` component groups related items within a menu, establishing a shared\r\n * context for interaction and selection. It enables separation of concerns—such as organizing radio\r\n * items into mutually exclusive sets.\r\n *\r\n * @tag m3e-menu-item-group\r\n *\r\n * @slot - Renders the contents of the group.\r\n */\r\n@customElement(\"m3e-menu-item-group\")\r\nexport class M3eMenuItemGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-group\": M3eMenuItemGroupElement;\r\n  }\r\n}\r\n","import { CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport { Checked, customElement, hasAssignedNodes, prefersReducedMotion, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { M3eMenuItemCheckboxElement } from \"./MenuItemCheckboxElement\";\r\nimport { M3eMenuItemElement } from \"./MenuItemElement\";\r\nimport { MenuItemElementBase } from \"./MenuItemElementBase\";\r\n\r\n/**\r\n * An item of a menu which supports a mutually exclusive checkable state.\r\n *\r\n * @description\r\n * The `m3e-menu-item-radio` component represents a selectable menu item that participates in a mutually exclusive group.\r\n * It reflects a singular choice within a shared context—such as sort order, theme selection, or view mode—and updates\r\n * group state when selected. This component can be nested within an `m3e-menu-item-group`, allowing multiple exclusive\r\n * groups to coexist within a single menu.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-menu-item-radio` in a `m3e-menu` to allow a user to select a sort order.\r\n * The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified by the `for` attribute when its parenting element is activated.\r\n * ```html\r\n * <m3e-button>\r\n *  <m3e-menu-trigger for=\"menu\">Sort order</m3e-menu-trigger>\r\n * </m3e-button>\r\n * <m3e-menu id=\"menu\">\r\n *  <m3e-menu-item-radio>Ascending</m3e-menu-item-radio>\r\n *  <m3e-menu-item-radio>Descending</m3e-menu-item-radio>\r\n * </m3e-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item-radio\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n * @slot trailing-icon - Renders an icon after the item's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr checked - Whether the element is checked.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-menu-item-container-height - Height of the menu item container.\r\n * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.\r\n * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.\r\n * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.\r\n * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.\r\n * @cssprop --m3e-menu-item-selected-color - Text color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.\r\n * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.\r\n * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.\r\n * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.\r\n * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.\r\n * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.\r\n * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.\r\n * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.\r\n * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant\r\n * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.\r\n * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.\r\n * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.\r\n * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.\r\n * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.\r\n * @cssprop --m3e-menu-item-shape - Base shape of the menu item.\r\n * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.\r\n * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.\r\n * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.\r\n */\r\n@customElement(\"m3e-menu-item-radio\")\r\nexport class M3eMenuItemRadioElement extends Checked(Role(MenuItemElementBase, \"menuitemradio\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = M3eMenuItemCheckboxElement.styles;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #keyUpHandler = () => this.#handleKeyUp();\r\n  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();\r\n\r\n  /** @private */ #spacePressed = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.addEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n    this.removeEventListener(\"mouseenter\", this.#mouseEnterHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\") && this.checked) {\r\n      (this.closest(\"[role='group']\") ?? this.closest(\"m3e-menu\"))\r\n        ?.querySelectorAll(\"m3e-menu-item-radio\")\r\n        .forEach((x) => {\r\n          if (x !== this && x.checked) {\r\n            x.checked = false;\r\n          }\r\n        });\r\n    }\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderContent(): unknown {\r\n    return html` <div class=\"icon\">\r\n        <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n        </svg>\r\n        <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n      </div>\r\n      <slot></slot>\r\n      <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.checked = true;\r\n      this.performUpdate();\r\n\r\n      if (!this.#spacePressed) {\r\n        if (!prefersReducedMotion()) {\r\n          setTimeout(() => this.menu?.hideAll(true), 150);\r\n        } else {\r\n          this.menu?.hideAll(true);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#spacePressed = e.key === \" \";\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(): void {\r\n    this.#spacePressed = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleMouseEnter(): void {\r\n    this.menu?.items.forEach((item) => {\r\n      if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {\r\n        item.submenu.hide();\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-menu-item-radio\": M3eMenuItemRadioElement;\r\n  }\r\n}\r\n"],"names":["MenuItemElementBase","KeyboardClick","Focusable","AttachInternals","Disabled","LitElement","constructor","super","FocusController","this","callback","focused","menu","_activate","closest","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","isLinkButtonMixin","renderPseudoLink","nothing","_renderContent","styles","css","DesignToken","density","calc","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","label","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","M3eMenuTriggerElement","HtmlFor","ActionElementBase","control","tagName","parentElement","ariaHasPopup","ariaExpanded","id","addAriaReferencedId","submenu","detach","removeAriaReferencedId","_onClick","show","toggle","customElement","M3eMenuItemElement","M3eMenuItemElement_1","LinkButton","Role","_M3eMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eMenuItemElement_keyDownHandler","_M3eMenuItemElement_mouseEnterHandler","_M3eMenuItemElement_instances","_M3eMenuItemElement_handleMouseEnter","_hasSubmenu","_M3eMenuItemElement_submenuTrigger","HoverController","startDelay","endDelay","hovering","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_M3eMenuItemElement_iconSlotChangeHandler","_M3eMenuItemElement_defaultSlotChangeHandler","M3eDirectionality","current","_M3eMenuItemElement_trailingIconSlotChangeHandler","__classPrivateFieldSet","target","assignedElements","flatten","find","undefined","setCustomState","hasAssignedNodes","defaultPrevented","hideAll","key","preventDefault","items","item","isOpen","hide","state","M3eMenuElement","M3eMenuElement_1","SuppressInitialAnimation","_M3eMenuElement_trigger","_M3eMenuElement_anchorCleanup","_M3eMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eMenuElement_keyDownHandler","_M3eMenuElement_mouseEnterHandler","_M3eMenuElement_instances","_M3eMenuElement_handleMouseEnter","_M3eMenuElement_documentClickHandler","_M3eMenuElement_scrollController","ScrollController","filter","_M3eMenuElement_toggleHandler","newState","setTimeout","setActiveItem","positionX","positionY","variant","tabIndex","setAttribute","document","_M3eMenuElement_deactivate","trigger","positionAnchor","position","inline","flip","shift","offset","y","top","Math","round","includes","style","right","window","innerWidth","clientWidth","left","parent","showPopover","observe","restoreFocus","hidePopover","focus","unobserve","_M3eMenuElement_handleSlotChange","__activeMenu","deleteCustomState","addCustomState","added","setItems","querySelectorAll","activeItem","updateActiveItem","i","previousElementSibling","length","onKeyDown","shiftKey","ctrlKey","composedPath","some","element","offsetParent","HTMLElement","offsetLeft","scrollLeft","clientLeft","offsetTop","scrollTop","clientTop","registerStyleSheet","scrollbar","thinWidth","elevation","level3","small","duration","short2","easing","medium1","onTertiary","tertiary","surfaceContainer","property","attribute","reflect","type","Boolean","M3eMenuItemCheckboxElement","Checked","_M3eMenuItemCheckboxElement_clickHandler","_M3eMenuItemCheckboxElement_keyDownHandler","_M3eMenuItemCheckboxElement_keyUpHandler","_M3eMenuItemCheckboxElement_instances","_M3eMenuItemCheckboxElement_handleKeyUp","_M3eMenuItemCheckboxElement_mouseEnterHandler","_M3eMenuItemCheckboxElement_handleMouseEnter","_M3eMenuItemCheckboxElement_spacePressed","_M3eMenuItemCheckboxElement_handleIconSlotChange","_M3eMenuItemCheckboxElement_handleTrailingIconSlotChange","checked","performUpdate","prefersReducedMotion","M3eMenuItemGroupElement","M3eMenuItemRadioElement","_M3eMenuItemRadioElement_clickHandler","_M3eMenuItemRadioElement_keyDownHandler","_M3eMenuItemRadioElement_keyUpHandler","_M3eMenuItemRadioElement_instances","_M3eMenuItemRadioElement_handleKeyUp","_M3eMenuItemRadioElement_mouseEnterHandler","_M3eMenuItemRadioElement_handleMouseEnter","_M3eMenuItemRadioElement_spacePressed","update","changedProperties","has","_M3eMenuItemRadioElement_handleIconSlotChange","_M3eMenuItemRadioElement_handleTrailingIconSlotChange"],"mappings":"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"}

package/dist/option.js

@@ -138,7 +138,7 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
   }
 };
 /** The styles of the element. */
-M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:is(:state(--empty), :--empty)) .icon, :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
+M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: calc(var(--m3e-option-container-height, 2.75rem) + ${DesignToken.density.calc(-3)}); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:is(:state(--empty), :--empty))[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]:not(:is(:state(--first), :--first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host([selected]:not(:is(:state(--last), :--last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--first), :--first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); } :host(:is(:state(--last), :--last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); } .touch { position: absolute; height: calc( var(--m3e-option-container-height, 2.75rem) + calc(var(--m3e-option-panel-gap, 0.125rem) * 2) + ${DesignToken.density.calc(-3)} ); left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:is(:state(--empty), :--empty)) .icon, :host(:is(:state(--hide-selection-indicator), :--hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
 __decorate([query(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
 __decorate([query(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
 __decorate([query(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);