@m3e/web 2.1.1 → 2.1.2

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 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,customElement 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)) .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};
+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 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 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 S,addCustomState as W,Checked as T,prefersReducedMotion as A}from"@m3e/web/core";import{addAriaReferencedId as P,removeAriaReferencedId as D,RovingTabIndexManager as z}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(m(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: 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(:state(-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(:state(-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(:state(-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(:state(-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")],R.prototype,"_focusRing",void 0),e([l(".state-layer")],R.prototype,"_stateLayer",void 0),e([l(".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&&P(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&&D(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 Y,B,H,K,N,Z,X,j,q,G,V,F;U=e([w("m3e-menu-trigger")],U);let J=F=class extends($(E(R,"menuitem"))){constructor(){super(),Y.add(this),B.set(this,e=>t(this,Y,"m",q).call(this,e)),H.set(this,e=>t(this,Y,"m",G).call(this,e)),K.set(this,()=>t(this,Y,"m",V).call(this)),this._hasSubmenu=!1,N.set(this,void 0),new x(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&t(this,N,"f")&&t(this,N,"f").menu?.show(this)}})}get submenu(){return t(this,N,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,B,"f")),this.addEventListener("keydown",t(this,H,"f")),this.addEventListener("mouseenter",t(this,K,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,B,"f")),this.removeEventListener("keydown",t(this,H,"f")),this.removeEventListener("mouseenter",t(this,K,"f"))}_renderContent(){return o`<slot name="icon" aria-hidden="true" @slotchange="${t(this,Y,"m",X)}"></slot><span class="content"><slot @slotchange="${t(this,Y,"m",Z)}"></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,Y,"m",j)}"></slot>`}`}};var Q,ee,te,ie,ne,se,oe,re,ae,le,ce,he,me,de,ue,pe;B=new WeakMap,H=new WeakMap,K=new WeakMap,N=new WeakMap,Y=new WeakSet,Z=function(e){i(this,N,e.target.assignedElements({flatten:!0}).find(e=>e instanceof U),"f"),this._hasSubmenu=void 0!==t(this,N,"f")},X=function(e){M(this,"-with-icon",L(e.target))},j=function(e){M(this,"-with-trailing-icon",L(e.target))},q=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},G=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))}},V=function(){this.menu?.items.forEach(e=>{e instanceof F&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},e([c()],J.prototype,"_hasSubmenu",void 0),J=F=e([w("m3e-menu-item")],J);let fe=pe=class extends(C(u(E(n,"menu")))){constructor(){super(...arguments),Q.add(this),ee.set(this,void 0),te.set(this,void 0),ie.set(this,(new z).withWrap().withHomeAndEnd().withVerticalOrientation()),ne.set(this,e=>t(this,Q,"m",ce).call(this,e)),se.set(this,()=>t(this,Q,"m",he).call(this)),oe.set(this,e=>t(this,Q,"m",me).call(this,e)),re.set(this,new _(this,{target:null,callback:e=>e instanceof pe?e.items.filter(e=>e instanceof J).forEach(e=>e.submenu?.hide()):this.hideAll()})),ae.set(this,e=>{"closed"===e.newState?(t(this,te,"f")?.call(this),i(this,te,void 0,"f")):setTimeout(()=>{t(this,ie,"f").setActiveItem(t(this,ie,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.variant="standard",this.submenu=!1}get items(){return t(this,ie,"f").items}get isOpen(){return void 0!==t(this,ee,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",t(this,ne,"f")),this.addEventListener("mouseenter",t(this,se,"f")),this.addEventListener("toggle",t(this,ae,"f")),document.addEventListener("click",t(this,oe,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",t(this,ne,"f")),this.removeEventListener("mouseenter",t(this,se,"f")),this.removeEventListener("toggle",t(this,ae,"f")),document.removeEventListener("click",t(this,oe,"f")),t(this,Q,"m",ue).call(this)}async show(e){t(this,ee,"f")&&t(this,ee,"f")!==e&&this.hide();let n=this.positionX;"rtl"===O.current&&(n="before"===n?"after":"before"),i(this,te,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:!0,offset:this.submenu?void 0:4},(e,i,n)=>{if(this.submenu){if(t(this,ee,"f")){const e=t(this,Q,"m",de).call(this,t(this,ee,"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,ee,e,"f"),t(this,ee,"f").ariaExpanded="true",t(this,re,"f").observe(t(this,ee,"f"))}hide(e=!1){for(const e of t(this,ie,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}t(this,Q,"m",ue).call(this),this.hidePopover(),t(this,ee,"f")&&(t(this,ee,"f").ariaExpanded="false",e&&t(this,ee,"f").focus(),t(this,re,"f").unobserve(t(this,ee,"f")),i(this,ee,void 0,"f"))}hideAll(e=!1){let i=this;for(;t(i,ee,"f");){const e=t(i,ee,"f").closest("m3e-menu");if(!e)break;i=e}i.hide(e)}async toggle(e){t(this,ee,"f")?this.hide():await this.show(e)}render(){return o`<div class="base"><slot @slotchange="${t(this,Q,"m",le)}"></slot></div>`}_activate(){this!==pe.__activeMenu&&(pe.__activeMenu&&S(pe.__activeMenu,"-active"),pe.__activeMenu=this,W(pe.__activeMenu,"-active"))}};var ve,be,ge,ke,ye,we,$e,Ee,xe,Me,Le,Ce;ee=new WeakMap,te=new WeakMap,ie=new WeakMap,ne=new WeakMap,se=new WeakMap,oe=new WeakMap,re=new WeakMap,ae=new WeakMap,Q=new WeakSet,le=function(){const{added:e}=t(this,ie,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));t(this,ie,"f").activeItem||t(this,ie,"f").updateActiveItem(e.find(e=>!e.disabled)),t(this,ie,"f").items.forEach((e,i)=>{M(e,"-first",0===i&&!e.previousElementSibling),M(e,"-last",i===t(this,ie,"f").items.length-1)})},ce=function(e){switch(e.key){case"Right":case"ArrowRight":"rtl"===O.current?(e.preventDefault(),this.hide(!0)):t(this,ie,"f").onKeyDown(e);break;case"Left":case"ArrowLeft":"ltr"===O.current?(e.preventDefault(),this.hide(!0)):t(this,ie,"f").onKeyDown(e);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:t(this,ie,"f").onKeyDown(e)}},he=function(){this._activate()},me=function(e){this.submenu||e.composedPath().some(e=>e instanceof pe||e===t(this,ee,"f"))||this.hide()},de=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}},ue=function(){this===pe.__activeMenu&&(S(pe.__activeMenu,"-active"),pe.__activeMenu=void 0)},(()=>{if("undefined"!=typeof window){const e=new CSSStyleSheet;e.replaceSync(a`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}})(),fe.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(:state(-active))) { border-radius: var(--m3e-menu-container-shape, ${g.shape.corner.small}); } :host(:not(:state(-active))) .base { --m3e-menu-item-first-child-shape: ${g.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${g.shape.corner.extraSmall}; } :host(:state(-active)) { border-radius: var(--m3e-menu-active-container-shape, ${g.shape.corner.large}); } :host(:not(:state(-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(: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, ${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(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`,e([h({attribute:"position-x"})],fe.prototype,"positionX",void 0),e([h({attribute:"position-y"})],fe.prototype,"positionY",void 0),e([h({reflect:!0})],fe.prototype,"variant",void 0),e([h({type:Boolean,reflect:!0})],fe.prototype,"submenu",void 0),fe=pe=e([w("m3e-menu")],fe);let _e=class extends(T(E(R,"menuitemcheckbox"))){constructor(){super(...arguments),ve.add(this),be.set(this,e=>t(this,ve,"m",xe).call(this,e)),ge.set(this,e=>t(this,ve,"m",Me).call(this,e)),ke.set(this,()=>t(this,ve,"m",Le).call(this)),ye.set(this,()=>t(this,ve,"m",Ce).call(this)),we.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,be,"f")),this.addEventListener("keydown",t(this,ge,"f")),this.addEventListener("keyup",t(this,ke,"f")),this.addEventListener("mouseenter",t(this,ye,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,be,"f")),this.removeEventListener("keydown",t(this,ge,"f")),this.removeEventListener("keyup",t(this,ke,"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,ve,"m",$e)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,ve,"m",Ee)}"></slot>`}};be=new WeakMap,ge=new WeakMap,ke=new WeakMap,ye=new WeakMap,we=new WeakMap,ve=new WeakSet,$e=function(e){M(this,"-with-icon",L(e.target))},Ee=function(e){M(this,"-with-trailing-icon",L(e.target))},xe=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),t(this,we,"f")||(A()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Me=function(e){i(this,we," "===e.key,"f")},Le=function(){i(this,we,!1,"f")},Ce=function(){this.menu?.items.forEach(e=>{e instanceof J&&e.submenu?.isOpen&&e.submenu.hide()})},_e.styles=[R.styles,a`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${g.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; } }`],_e=e([w("m3e-menu-item-checkbox")],_e);let Se=class extends(E(n,"group")){render(){return o`<slot></slot>`}};var We,Te,Ae,Pe,De,ze,Ie,Oe,Re,Ue,Ye,Be;Se.styles=a`:host { display: contents; }`,Se=e([w("m3e-menu-item-group")],Se);let He=class extends(T(E(R,"menuitemradio"))){constructor(){super(...arguments),We.add(this),Te.set(this,e=>t(this,We,"m",Re).call(this,e)),Ae.set(this,e=>t(this,We,"m",Ue).call(this,e)),Pe.set(this,()=>t(this,We,"m",Ye).call(this)),De.set(this,()=>t(this,We,"m",Be).call(this)),ze.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,Te,"f")),this.addEventListener("keydown",t(this,Ae,"f")),this.addEventListener("keyup",t(this,Pe,"f")),this.addEventListener("mouseenter",t(this,De,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,Te,"f")),this.removeEventListener("keydown",t(this,Ae,"f")),this.removeEventListener("keyup",t(this,Pe,"f")),this.removeEventListener("mouseenter",t(this,De,"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,We,"m",Ie)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,We,"m",Oe)}"></slot>`}};Te=new WeakMap,Ae=new WeakMap,Pe=new WeakMap,De=new WeakMap,ze=new WeakMap,We=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,ze,"f")||(A()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Ue=function(e){i(this,ze," "===e.key,"f")},Ye=function(){i(this,ze,!1,"f")},Be=function(){this.menu?.items.forEach(e=>{e instanceof J&&e.submenu?.isOpen&&e.submenu.hide()})},He.styles=_e.styles,He=e([w("m3e-menu-item-radio")],He);export{fe as M3eMenuElement,_e as M3eMenuItemCheckboxElement,J as M3eMenuItemElement,Se as M3eMenuItemGroupElement,He as M3eMenuItemRadioElement,U as M3eMenuTriggerElement};
 //# sourceMappingURL=menu.min.js.map