@m3e/web 2.0.3 → 2.0.4

package/dist/menu.min.js

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