@m3e/web 2.1.3 → 2.2.1

package/dist/drawer-container.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as s}from"tslib";import{unsafeCSS as r,css as i,LitElement as o,html as a}from"lit";import{state as n,property as d}from"lit/decorators.js";import{DesignToken as l,ReconnectedCallback as h,AttachInternals as c,ResizeController as m,addCustomState as p,hasAssignedNodes as u,hasCustomState as v,deleteCustomState as b,customElement as g,HtmlFor as f,ActionElementBase as w}from"@m3e/web/core";import{M3eBreakpointObserver as $,Breakpoint as y}from"@m3e/web/core/layout";import{addAriaReferencedId as M,removeAriaReferencedId as _}from"@m3e/web/core/a11y";const x=r(`var(--m3e-drawer-container-color, ${l.color.surface})`),k=r(`var(--m3e-drawer-container-elevation, ${l.elevation.level0})`),E=r("var(--m3e-drawer-container-width, 22.5rem)"),z=r("var(--m3e-drawer-container-scrim-opacity, 32%)"),S=r(`var(--m3e-modal-drawer-corner-shape, ${l.shape.corner.large})`),C=r(`var(--m3e-modal-drawer-container-color, ${l.color.surfaceContainerLow})`),W=r(`var(--m3e-modal-drawer-elevation, ${l.elevation.level1})`),B=r(`var(--m3e-drawer-divider-color, ${l.color.outline})`),L=r("var(--m3e-drawer-divider-thickness, 1px)"),U=i`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${l.scrollbar.thinWidth}; scrollbar-color: ${l.scrollbar.color}; box-sizing: border-box; background-color: ${x}; box-shadow: ${k}; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete,\n      background-color ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      box-shadow ${l.motion.duration.medium4} ${l.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${E})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${E})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${E})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${E})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${E}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard}`)}; } :host(:state(-start-push)[start]:not(:dir(rtl))) .content, :host(:state(-start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${E}); } :host(:state(-start-push)[start]:dir(rtl)) .content, :host(:state(-start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${E}); } :host(:state(-end-push)[end]:not(:dir(rtl))) .content, :host(:state(-end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${E}); } :host(:state(-end-push)[end]:dir(rtl)) .content, :host(:state(-end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${E}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${l.color.scrim}; opacity: 0; visibility: hidden; transition: ${r(`opacity ${l.motion.duration.medium4} ${l.motion.easing.standard}, \n        visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:state(-start-push)[start]) .scrim, :host(:state(-end-push)[end]) .scrim, :host(:state(-start-over)[start]) .scrim, :host(:state(-end-over)[end]) .scrim { visibility: visible; opacity: ${z}; } :host(:state(-start-push)) .start, :host(:state(-start-over)) .start { border-start-end-radius: ${S}; border-end-end-radius: ${S}; } :host(:state(-end-push)) .end, :host(:state(-end-over)) .end { border-start-start-radius: ${S}; border-end-start-radius: ${S}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: ${C}; box-shadow: ${W}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${L}; border-inline-end-style: solid; box-sizing: border-box; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: ${B}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${L}; border-inline-start-style: solid; box-sizing: border-box; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: ${B}; } :host(:state(-no-animate)) .start, :host(:state(-no-animate)) .end, :host(:state(-no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete`)}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: GrayText; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;var A,D,F,P,T,X,q,G,R,j,I,H;let J=class extends(h(c(o))){constructor(){super(...arguments),A.add(this),this._startMode="side",this._endMode="side",D.set(this,void 0),F.set(this,!1),P.set(this,!1),T.set(this,new m(this,{target:null,skipInitial:!0,callback:e=>t(this,A,"m",j).call(this,e)})),this.start=!1,this.startMode="side",this.startDivider=!1,this.end=!1,this.endMode="side",this.endDivider=!1}connectedCallback(){super.connectedCallback(),p(this,"-no-animate")}disconnectedCallback(){super.disconnectedCallback(),t(this,D,"f")?.call(this),t(this,A,"m",I).call(this)}willUpdate(s){super.willUpdate(s),(s.has("startMode")||s.has("endMode"))&&(t(this,D,"f")?.call(this),"auto"===this.startMode||"auto"===this.endMode?e(this,D,$.observe([y.XSmall,y.Small],e=>t(this,A,"m",H).call(this,e,!0)),"f"):t(this,A,"m",H).call(this)),s.has("start")?this.start&&this.end&&"side"!==this._endMode&&(this.end=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):s.has("end")&&this.end&&this.start&&"side"!==this._startMode&&(this.start=!1,this.dispatchEvent(new Event("change",{bubbles:!0})))}reconnectedCallback(){super.reconnectedCallback(),t(this,A,"m",X).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,A,"m",X).call(this)}render(){return a`<div class="start"><m3e-focus-trap ?disabled="${!this.start||"side"===this._startMode||t(this,F,"f")}"><slot name="start" @slotchange="${t(this,A,"m",G)}"></slot></m3e-focus-trap></div><div class="content" .inert="${("side"!==this._startMode||"side"!==this._endMode)&&(this.start||this.end)}"><slot></slot></div><div class="scrim" @click="${t(this,A,"m",q)}"></div><div class="end"><m3e-focus-trap ?disabled="${!this.end||"side"===this._endMode||t(this,P,"f")}"><slot name="end" @slotchange="${t(this,A,"m",R)}"></slot></m3e-focus-trap></div>`}};var K,N,O,Q,V,Y;D=new WeakMap,F=new WeakMap,P=new WeakMap,T=new WeakMap,A=new WeakSet,X=function(){let e=this.shadowRoot?.querySelector(".start");e&&t(this,T,"f").observe(e),e=this.shadowRoot?.querySelector(".end"),e&&t(this,T,"f").observe(e)},q=function(){"side"!==this._startMode&&(this.start=!1),"side"!==this._endMode&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0}))},G=function(t){e(this,F,!u(t.target),"f")},R=function(t){e(this,P,!u(t.target),"f")},j=function(t){for(const e of t){const t=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;e.target.classList.contains("start")?this.style.setProperty("--_start-drawer-size",`${t.inlineSize}px`):e.target.classList.contains("end")&&this.style.setProperty("--_end-drawer-size",`${t.inlineSize}px`)}v(this,"-no-animate")&&(this.offsetTop,b(this,"-no-animate"))},I=function(){b(this,"-start-over"),b(this,"-start-push"),b(this,"-start-side"),b(this,"-end-over"),b(this,"-end-push"),b(this,"-end-side")},H=function(e,s=!1){let r=!1,i=!1;"auto"===this.startMode?e?.get(y.Medium)?this._startMode="side":e?.get(y.Small)?(r="side"===this._startMode&&this.start,this._startMode="push"):e?.get(y.XSmall)?(r="over"!==this._startMode&&this.start,this._startMode="over"):this._startMode="side":this._startMode=this.startMode,"auto"===this.endMode?e?.get(y.Medium)?this._endMode="side":e?.get(y.Small)?(i="side"===this._endMode&&this.end,this._endMode="push"):e?.get(y.XSmall)?(i="over"!==this._endMode&&this.end,this._endMode="over"):this._endMode="side":this._endMode=this.endMode,t(this,A,"m",I).call(this),p(this,`-start-${this._startMode}`),p(this,`-end-${this._endMode}`),s&&(r||i)&&(r&&(this.start=!1),i&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0})))},J.styles=U,s([n()],J.prototype,"_startMode",void 0),s([n()],J.prototype,"_endMode",void 0),s([d({type:Boolean,reflect:!0})],J.prototype,"start",void 0),s([d({attribute:"start-mode",reflect:!0})],J.prototype,"startMode",void 0),s([d({attribute:"start-divider",type:Boolean,reflect:!0})],J.prototype,"startDivider",void 0),s([d({type:Boolean,reflect:!0})],J.prototype,"end",void 0),s([d({attribute:"end-mode",reflect:!0})],J.prototype,"endMode",void 0),s([d({attribute:"end-divider",type:Boolean,reflect:!0})],J.prototype,"endDivider",void 0),J=s([g("m3e-drawer-container")],J);let Z=class extends(f(w)){constructor(){super(...arguments),K.add(this),N.set(this,()=>t(this,K,"m",Q).call(this)),O.set(this,!1)}attach(e){super.attach(e),this.htmlFor&&this.parentElement&&M(this.parentElement,"aria-controls",this.htmlFor);const s=e.closest("m3e-drawer-container");s&&(s.addEventListener("change",t(this,N,"f")),t(this,K,"m",Y).call(this,s,!0))}detach(){this.parentElement&&(this.htmlFor&&_(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),this.control?.closest("m3e-drawer-container")?.removeEventListener("change",t(this,N,"f")),super.detach()}_onClick(){t(this,K,"m",V).call(this)}};N=new WeakMap,O=new WeakMap,K=new WeakSet,Q=function(){if(this.control&&!t(this,O,"f")){const e=this.control.closest("m3e-drawer-container");e&&t(this,K,"m",Y).call(this,e,!0)}},V=async function(){if(!this.parentElement||!this.control)return;const s=this.control.closest("m3e-drawer-container");if(s){e(this,O,!0,"f");try{"start"===this.control.slot?s.start=!s.start:"end"===this.control.slot&&(s.end=!s.end),s.isUpdatePending&&await s.updateComplete,await t(this,K,"m",Y).call(this,s,!1)}finally{e(this,O,!1,"f")}}},Y=async function(t,e){if(!this.parentElement||!this.control)return;let s=!1;"start"===this.control.slot?s=t.start:"end"===this.control.slot&&(s=t.end),this.parentElement.ariaExpanded=`${s}`,e&&this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",s),this.parentElement instanceof o&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},Z=s([g("m3e-drawer-toggle")],Z);export{J as M3eDrawerContainerElement,Z as M3eDrawerToggleElement};
+import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as s}from"tslib";import{unsafeCSS as r,css as i,LitElement as o,html as a}from"lit";import{state as n,property as d}from"lit/decorators.js";import{DesignToken as l,ReconnectedCallback as h,AttachInternals as c,ResizeController as m,addCustomState as p,hasAssignedNodes as u,hasCustomState as v,deleteCustomState as b,customElement as g,HtmlFor as f,ActionElementBase as w}from"@m3e/web/core";import{M3eBreakpointObserver as $,Breakpoint as y}from"@m3e/web/core/layout";import{addAriaReferencedId as M,removeAriaReferencedId as _}from"@m3e/web/core/a11y";const x=r(`var(--m3e-drawer-container-color, ${l.color.surface})`),k=r(`var(--m3e-drawer-container-elevation, ${l.elevation.level0})`),E=r("var(--m3e-drawer-container-width, 22.5rem)"),z=r("var(--m3e-drawer-container-scrim-opacity, 32%)"),S=r(`var(--m3e-modal-drawer-corner-shape, ${l.shape.corner.large})`),C=r(`var(--m3e-modal-drawer-container-color, ${l.color.surfaceContainerLow})`),W=r(`var(--m3e-modal-drawer-elevation, ${l.elevation.level1})`),B=r(`var(--m3e-drawer-divider-color, ${l.color.outline})`),L=r("var(--m3e-drawer-divider-thickness, 1px)"),U=i`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${l.scrollbar.thinWidth}; scrollbar-color: ${l.scrollbar.color}; box-sizing: border-box; background-color: ${x}; box-shadow: ${k}; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete,\n      background-color ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      box-shadow ${l.motion.duration.medium4} ${l.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${E})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${E})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${E})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${E})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${E}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard}`)}; } :host(:state(-start-push)[start]:not(:dir(rtl))) .content, :host(:state(-start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${E}); } :host(:state(-start-push)[start]:dir(rtl)) .content, :host(:state(-start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${E}); } :host(:state(-end-push)[end]:not(:dir(rtl))) .content, :host(:state(-end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${E}); } :host(:state(-end-push)[end]:dir(rtl)) .content, :host(:state(-end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${E}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${l.color.scrim}; opacity: 0; visibility: hidden; transition: ${r(`opacity ${l.motion.duration.medium4} ${l.motion.easing.standard}, \n        visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:state(-start-push)[start]) .scrim, :host(:state(-end-push)[end]) .scrim, :host(:state(-start-over)[start]) .scrim, :host(:state(-end-over)[end]) .scrim { visibility: visible; opacity: ${z}; } :host(:state(-start-push)) .start, :host(:state(-start-over)) .start { border-start-end-radius: ${S}; border-end-end-radius: ${S}; } :host(:state(-end-push)) .end, :host(:state(-end-over)) .end { border-start-start-radius: ${S}; border-end-start-radius: ${S}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: ${C}; box-shadow: ${W}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${L}; border-inline-end-style: solid; box-sizing: border-box; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: ${B}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${L}; border-inline-start-style: solid; box-sizing: border-box; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: ${B}; } :host(:state(-no-animate)) .start, :host(:state(-no-animate)) .end, :host(:state(-no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${r(`margin ${l.motion.duration.medium4} ${l.motion.easing.standard},\n      visibility ${l.motion.duration.medium4} ${l.motion.easing.standard} allow-discrete`)}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: GrayText; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;var A,D,F,P,T,X,q,G,R,j,I,H,J;let K=class extends(h(c(o))){constructor(){super(...arguments),A.add(this),this._startMode="side",this._endMode="side",D.set(this,void 0),F.set(this,!1),P.set(this,!1),T.set(this,new m(this,{target:null,skipInitial:!0,callback:e=>t(this,A,"m",j).call(this,e)})),this.start=!1,this.startMode="side",this.startDivider=!1,this.end=!1,this.endMode="side",this.endDivider=!1}connectedCallback(){super.connectedCallback(),p(this,"-no-animate")}disconnectedCallback(){super.disconnectedCallback(),t(this,D,"f")?.call(this),t(this,A,"m",H).call(this)}willUpdate(e){super.willUpdate(e),(e.has("startMode")||e.has("endMode"))&&(t(this,D,"f")?.call(this),"auto"===this.startMode||"auto"===this.endMode?t(this,A,"m",I).call(this):t(this,A,"m",J).call(this)),e.has("start")?this.start&&this.end&&"side"!==this._endMode&&(this.end=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):e.has("end")&&this.end&&this.start&&"side"!==this._startMode&&(this.start=!1,this.dispatchEvent(new Event("change",{bubbles:!0})))}reconnectedCallback(){super.reconnectedCallback(),t(this,A,"m",X).call(this),"auto"!==this.startMode&&"auto"!==this.endMode||t(this,A,"m",I).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,A,"m",X).call(this)}render(){return a`<div class="start"><m3e-focus-trap ?disabled="${!this.start||"side"===this._startMode||t(this,F,"f")}"><slot name="start" @slotchange="${t(this,A,"m",G)}"></slot></m3e-focus-trap></div><div class="content" .inert="${("side"!==this._startMode||"side"!==this._endMode)&&(this.start||this.end)}"><slot></slot></div><div class="scrim" @click="${t(this,A,"m",q)}"></div><div class="end"><m3e-focus-trap ?disabled="${!this.end||"side"===this._endMode||t(this,P,"f")}"><slot name="end" @slotchange="${t(this,A,"m",R)}"></slot></m3e-focus-trap></div>`}};var N,O,Q,V,Y,Z;D=new WeakMap,F=new WeakMap,P=new WeakMap,T=new WeakMap,A=new WeakSet,X=function(){let e=this.shadowRoot?.querySelector(".start");e&&t(this,T,"f").observe(e),e=this.shadowRoot?.querySelector(".end"),e&&t(this,T,"f").observe(e)},q=function(){"side"!==this._startMode&&(this.start=!1),"side"!==this._endMode&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0}))},G=function(t){e(this,F,!u(t.target),"f")},R=function(t){e(this,P,!u(t.target),"f")},j=function(t){for(const e of t){const t=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;e.target.classList.contains("start")?this.style.setProperty("--_start-drawer-size",`${t.inlineSize}px`):e.target.classList.contains("end")&&this.style.setProperty("--_end-drawer-size",`${t.inlineSize}px`)}v(this,"-no-animate")&&(this.offsetTop,b(this,"-no-animate"))},I=function(){e(this,D,$.observe([y.XSmall,y.Small],e=>t(this,A,"m",J).call(this,e,!0)),"f")},H=function(){b(this,"-start-over"),b(this,"-start-push"),b(this,"-start-side"),b(this,"-end-over"),b(this,"-end-push"),b(this,"-end-side")},J=function(e,s=!1){let r=!1,i=!1;"auto"===this.startMode?e?.get(y.Medium)?this._startMode="side":e?.get(y.Small)?(r="side"===this._startMode&&this.start,this._startMode="push"):e?.get(y.XSmall)?(r="over"!==this._startMode&&this.start,this._startMode="over"):this._startMode="side":this._startMode=this.startMode,"auto"===this.endMode?e?.get(y.Medium)?this._endMode="side":e?.get(y.Small)?(i="side"===this._endMode&&this.end,this._endMode="push"):e?.get(y.XSmall)?(i="over"!==this._endMode&&this.end,this._endMode="over"):this._endMode="side":this._endMode=this.endMode,t(this,A,"m",H).call(this),p(this,`-start-${this._startMode}`),p(this,`-end-${this._endMode}`),s&&(r||i)&&(r&&(this.start=!1),i&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0})))},K.styles=U,s([n()],K.prototype,"_startMode",void 0),s([n()],K.prototype,"_endMode",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"start",void 0),s([d({attribute:"start-mode",reflect:!0})],K.prototype,"startMode",void 0),s([d({attribute:"start-divider",type:Boolean,reflect:!0})],K.prototype,"startDivider",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"end",void 0),s([d({attribute:"end-mode",reflect:!0})],K.prototype,"endMode",void 0),s([d({attribute:"end-divider",type:Boolean,reflect:!0})],K.prototype,"endDivider",void 0),K=s([g("m3e-drawer-container")],K);let tt=class extends(f(w)){constructor(){super(...arguments),N.add(this),O.set(this,()=>t(this,N,"m",V).call(this)),Q.set(this,!1)}attach(e){super.attach(e),this.htmlFor&&this.parentElement&&M(this.parentElement,"aria-controls",this.htmlFor);const s=e.closest("m3e-drawer-container");s&&(s.addEventListener("change",t(this,O,"f")),t(this,N,"m",Z).call(this,s,!0))}detach(){this.parentElement&&(this.htmlFor&&_(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),this.control?.closest("m3e-drawer-container")?.removeEventListener("change",t(this,O,"f")),super.detach()}_onClick(){t(this,N,"m",Y).call(this)}};O=new WeakMap,Q=new WeakMap,N=new WeakSet,V=function(){if(this.control&&!t(this,Q,"f")){const e=this.control.closest("m3e-drawer-container");e&&t(this,N,"m",Z).call(this,e,!0)}},Y=async function(){if(!this.parentElement||!this.control)return;const s=this.control.closest("m3e-drawer-container");if(s){e(this,Q,!0,"f");try{"start"===this.control.slot?s.start=!s.start:"end"===this.control.slot&&(s.end=!s.end),s.isUpdatePending&&await s.updateComplete,await t(this,N,"m",Z).call(this,s,!1)}finally{e(this,Q,!1,"f")}}},Z=async function(t,e){if(!this.parentElement||!this.control)return;let s=!1;"start"===this.control.slot?s=t.start:"end"===this.control.slot&&(s=t.end),this.parentElement.ariaExpanded=`${s}`,e&&this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",s),this.parentElement instanceof o&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},tt=s([g("m3e-drawer-toggle")],tt);export{K as M3eDrawerContainerElement,tt as M3eDrawerToggleElement};
 //# sourceMappingURL=drawer-container.min.js.map

package/dist/drawer-container.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-container.min.js","sources":["../../src/drawer-container/styles/DrawerContainerToken.ts","../../src/drawer-container/styles/DrawerContainerStyle.ts","../../src/drawer-container/DrawerContainerElement.ts","../../src/drawer-container/DrawerToggleElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-drawer-container-color, ${DesignToken.color.surface})`),\r\n  containerElevation: unsafeCSS(`var(--m3e-drawer-container-elevation, ${DesignToken.elevation.level0})`),\r\n  containerWidth: unsafeCSS(`var(--m3e-drawer-container-width, 22.5rem)`),\r\n  scrimOpacity: unsafeCSS(\"var(--m3e-drawer-container-scrim-opacity, 32%)\"),\r\n  cornerShape: unsafeCSS(`var(--m3e-modal-drawer-corner-shape, ${DesignToken.shape.corner.large})`),\r\n  modalContainerColor: unsafeCSS(`var(--m3e-modal-drawer-container-color, ${DesignToken.color.surfaceContainerLow})`),\r\n  modalContainerElevation: unsafeCSS(`var(--m3e-modal-drawer-elevation, ${DesignToken.elevation.level1})`),\r\n  dividerColor: unsafeCSS(`var(--m3e-drawer-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(\"var(--m3e-drawer-divider-thickness, 1px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { DrawerContainerToken } from \"./DrawerContainerToken\";\r\n\r\n/**\r\n * Styles for `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n  }\r\n  .start,\r\n  .end {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 3;\r\n    outline: none;\r\n    overflow-x: hidden;\r\n    overflow-y: auto;\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n    box-sizing: border-box;\r\n    background-color: ${DrawerContainerToken.containerColor};\r\n    box-shadow: ${DrawerContainerToken.containerElevation};\r\n    transition: ${unsafeCSS(\r\n      `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  .start {\r\n    inset-inline-start: 0;\r\n  }\r\n  .end {\r\n    inset-inline-end: 0;\r\n  }\r\n  :host(:not([start])) .start {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([start]):not(:dir(rtl))) .start {\r\n    margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([start]):dir(rtl)) .start {\r\n    margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([start]:not(:dir(rtl))) .start {\r\n    margin-left: 0;\r\n  }\r\n  :host([start]:dir(rtl)) .start {\r\n    margin-right: 0;\r\n  }\r\n  :host(:not([end])) .end {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([end]):not(:dir(rtl))) .end {\r\n    margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([end]):dir(rtl)) .end {\r\n    margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([end]:not(:dir(rtl))) .end {\r\n    margin-right: 0;\r\n  }\r\n  :host([end]:dir(rtl)) .end {\r\n    margin-left: 0;\r\n  }\r\n  ::slotted([slot=\"start\"]),\r\n  ::slotted([slot=\"end\"]) {\r\n    height: 100%;\r\n    width: ${DrawerContainerToken.containerWidth};\r\n    box-sizing: border-box;\r\n  }\r\n  .content {\r\n    position: relative;\r\n    height: 100%;\r\n    overflow: auto;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:state(-start-push)[start]:not(:dir(rtl))) .content,\r\n  :host(:state(-start-side)[start]:not(:dir(rtl))) .content {\r\n    margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-start-push)[start]:dir(rtl)) .content,\r\n  :host(:state(-start-side)[start]:dir(rtl)) .content {\r\n    margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:not(:dir(rtl))) .content,\r\n  :host(:state(-end-side)[end]:not(:dir(rtl))) .content {\r\n    margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:dir(rtl)) .content,\r\n  :host(:state(-end-side)[end]:dir(rtl)) .content {\r\n    margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  .scrim {\r\n    display: block;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    background-color: ${DesignToken.color.scrim};\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: ${unsafeCSS(\r\n      `opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, \r\n        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    .scrim {\r\n      opacity: 0;\r\n    }\r\n  }\r\n  :host(:state(-start-push)[start]) .scrim,\r\n  :host(:state(-end-push)[end]) .scrim,\r\n  :host(:state(-start-over)[start]) .scrim,\r\n  :host(:state(-end-over)[end]) .scrim {\r\n    visibility: visible;\r\n    opacity: ${DrawerContainerToken.scrimOpacity};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-start-over)) .start {\r\n    border-start-end-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-end-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-end-over)) .end {\r\n    border-start-start-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-start-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-start-over)) .start,\r\n  :host(:state(-end-over)) .end {\r\n    background-color: ${DrawerContainerToken.modalContainerColor};\r\n    box-shadow: ${DrawerContainerToken.modalContainerElevation};\r\n  }\r\n  :host([start-divider]) .start {\r\n    border-inline-end-color: transparent;\r\n    border-inline-end-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-end-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n    border-inline-end-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host([end-divider]) .end {\r\n    border-inline-start-color: transparent;\r\n    border-inline-start-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-start-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n    border-inline-start-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host(:state(-no-animate)) .start,\r\n  :host(:state(-no-animate)) .end,\r\n  :host(:state(-no-animate)) .content {\r\n    transition: none;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .start,\r\n    .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      transition: ${unsafeCSS(\r\n        `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:state(-start-push)) .start,\r\n    :host(:state(-end-push)) .end,\r\n    :host(:state(-start-over)) .start,\r\n    :host(:state(-end-over)) .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      border-color: CanvasText;\r\n    }\r\n    .start,\r\n    .end {\r\n      border-style: solid;\r\n      border-color: Canvas;\r\n      border-width: 1px;\r\n    }\r\n    .start {\r\n      border-inline-start-style: none;\r\n    }\r\n    .end {\r\n      border-inline-end-style: none;\r\n    }\r\n    :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n      border-inline-end-color: GrayText;\r\n    }\r\n    :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n      border-inline-start-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .start,\r\n    .end,\r\n    .content,\r\n    .scrim {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { DrawerMode } from \"./DrawerMode\";\r\n\r\nimport { DrawerContainerStyle } from \"./styles\";\r\n\r\n/**\r\n * A container for one or two sliding drawers.\r\n *\r\n * @description\r\n * A responsive layout container that manages left and right drawers alongside main content.\r\n * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.\r\n * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,\r\n * and permanent navigation.\r\n *\r\n * @example\r\n * The following example illustrates a typical drawer layout.\r\n * ```html\r\n * <m3e-drawer-container>\r\n *  <nav slot=\"start\">\r\n *    <!-- Start drawer content -->\r\n *  </nav>\r\n *  <main>\r\n *    <!-- Main content -->\r\n *  </main>\r\n *  <aside slot=\"end\">\r\n *    <!-- End drawer content -->\r\n *  </aside>\r\n * <m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-container\r\n *\r\n * @slot - Renders the main content.\r\n * @slot start - Renders the start drawer.\r\n * @slot end - Renders the end drawer.\r\n *\r\n * @attr end - Whether the end drawer is open.\r\n * @attr end-mode - The behavior mode of the end drawer.\r\n * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.\r\n * @attr start - Whether the start drawer is open.\r\n * @attr start-mode - The behavior mode of the start drawer.\r\n * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.\r\n *\r\n * @fires change - Emitted when the state of the start or end drawers change.\r\n *\r\n * @cssprop --m3e-drawer-container-color - The background color of the drawer container.\r\n * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.\r\n * @cssprop --m3e-drawer-container-width - The width of the drawer container.\r\n * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.\r\n * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer’s start edge (typically left in LTR).\r\n * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer’s end edge (typically right in LTR).\r\n * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.\r\n * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.\r\n * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.\r\n * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.\r\n */\r\n@customElement(\"m3e-drawer-container\")\r\nexport class M3eDrawerContainerElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = DrawerContainerStyle;\r\n\r\n  /** @private */ @state() private _startMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ @state() private _endMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ #disableStartFocusTrap = false;\r\n  /** @private */ #disableEndFocusTrap = false;\r\n\r\n  /** @private */\r\n  #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (entries) => this.#handleDrawerResize(entries),\r\n  });\r\n\r\n  /**\r\n   * Whether the start drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) start = false;\r\n\r\n  /**\r\n   * The behavior mode of the start drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-mode\", reflect: true }) startMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the start drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-divider\", type: Boolean, reflect: true }) startDivider = false;\r\n\r\n  /**\r\n   * Whether the end drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) end = false;\r\n\r\n  /**\r\n   * The behavior mode of the end drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-mode\", reflect: true }) endMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the end drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-divider\", type: Boolean, reflect: true }) endDivider = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"-no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#breakpointUnobserve?.();\r\n    this.#clearMode();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"startMode\") || changedProperties.has(\"endMode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n        this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) =>\r\n          this.#updateMode(matches, true),\r\n        );\r\n      } else {\r\n        this.#updateMode();\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"start\")) {\r\n      if (this.start && this.end && this._endMode !== \"side\") {\r\n        this.end = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"start\">\r\n        <m3e-focus-trap ?disabled=\"${!this.start || this._startMode === \"side\" || this.#disableStartFocusTrap}\">\r\n          <slot name=\"start\" @slotchange=\"${this.#handleStartSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        .inert=\"${(this._startMode !== \"side\" || this._endMode !== \"side\") && (this.start || this.end)}\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n      <div class=\"scrim\" @click=\"${this.#handleScrimClick}\"></div>\r\n      <div class=\"end\">\r\n        <m3e-focus-trap ?disabled=\"${!this.end || this._endMode === \"side\" || this.#disableEndFocusTrap}\">\r\n          <slot name=\"end\" @slotchange=\"${this.#handleEndSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    let drawer = this.shadowRoot?.querySelector<HTMLElement>(\".start\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n    drawer = this.shadowRoot?.querySelector(\".end\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n  }\r\n\r\n  /** @private */\r\n  #handleScrimClick() {\r\n    if (this._startMode !== \"side\") {\r\n      this.start = false;\r\n    }\r\n    if (this._endMode !== \"side\") {\r\n      this.end = false;\r\n    }\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleStartSlotChange(e: Event): void {\r\n    this.#disableStartFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleEndSlotChange(e: Event): void {\r\n    this.#disableEndFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerResize(entries: ResizeObserverEntry[]): void {\r\n    for (const entry of entries) {\r\n      const borderSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)\r\n        ? entry.borderBoxSize[0]\r\n        : entry.borderBoxSize;\r\n\r\n      if (entry.target.classList.contains(\"start\")) {\r\n        this.style.setProperty(\"--_start-drawer-size\", `${borderSize.inlineSize}px`);\r\n      } else if (entry.target.classList.contains(\"end\")) {\r\n        this.style.setProperty(\"--_end-drawer-size\", `${borderSize.inlineSize}px`);\r\n      }\r\n    }\r\n\r\n    if (hasCustomState(this, \"-no-animate\")) {\r\n      // Force synchronous layout flush\r\n      void this.offsetTop;\r\n      deleteCustomState(this, \"-no-animate\");\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #clearMode(): void {\r\n    deleteCustomState(this, \"-start-over\");\r\n    deleteCustomState(this, \"-start-push\");\r\n    deleteCustomState(this, \"-start-side\");\r\n    deleteCustomState(this, \"-end-over\");\r\n    deleteCustomState(this, \"-end-push\");\r\n    deleteCustomState(this, \"-end-side\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #updateMode(breakpoints?: Map<string, boolean>, autoClose = false) {\r\n    let autoCloseStart = false,\r\n      autoCloseEnd = false;\r\n    if (this.startMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._startMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseStart = this._startMode === \"side\" && this.start;\r\n        this._startMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseStart = this._startMode !== \"over\" && this.start;\r\n        this._startMode = \"over\";\r\n      } else {\r\n        this._startMode = \"side\";\r\n      }\r\n    } else {\r\n      this._startMode = this.startMode;\r\n    }\r\n\r\n    if (this.endMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._endMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseEnd = this._endMode === \"side\" && this.end;\r\n        this._endMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseEnd = this._endMode !== \"over\" && this.end;\r\n        this._endMode = \"over\";\r\n      } else {\r\n        this._endMode = \"side\";\r\n      }\r\n    } else {\r\n      this._endMode = this.endMode;\r\n    }\r\n\r\n    this.#clearMode();\r\n\r\n    addCustomState(this, `-start-${this._startMode}`);\r\n    addCustomState(this, `-end-${this._endMode}`);\r\n\r\n    if (autoClose && (autoCloseStart || autoCloseEnd)) {\r\n      if (autoCloseStart) {\r\n        this.start = false;\r\n      }\r\n      if (autoCloseEnd) {\r\n        this.end = false;\r\n      }\r\n\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-container\": M3eDrawerContainerElement;\r\n  }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eDrawerContainerElement } from \"./DrawerContainerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the opened state of a drawer.\r\n *\r\n * @example\r\n * The following example illustrates the use of a `m3e-drawer-toggle`, nested inside a `m3e-icon-button` component,\r\n * which toggles the open state of the start drawer.\r\n *\r\n * ```html\r\n * <m3e-icon-button slot=\"leading-icon\" aria-label=\"Menu\" toggle selected>\r\n *   <m3e-drawer-toggle for=\"startDrawer\"></m3e-drawer-toggle>\r\n *   <m3e-icon name=\"menu\"></m3e-icon>\r\n *   <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * </m3e-icon-button>\r\n *\r\n * <m3e-drawer-container start>\r\n *   <nav slot=\"start\" id=\"startDrawer\" aria-label=\"Navigation\">\r\n *     <!-- Start drawer content -->\r\n *   </nav>\r\n *   <!-- Container content -->\r\n * </m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-toggle\r\n */\r\n@customElement(\"m3e-drawer-toggle\")\r\nexport class M3eDrawerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @private */ readonly #drawerContainerChangeHandler = () => this.#handleDrawerContainerChange();\r\n  /** @private */ #togglingDrawer = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.htmlFor && this.parentElement) {\r\n      addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n    }\r\n\r\n    const container = control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      container.addEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n      this.#updateToggle(container, true);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      if (this.htmlFor) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n      }\r\n\r\n      this.parentElement.ariaExpanded = null;\r\n    }\r\n\r\n    this.control?.closest(\"m3e-drawer-container\")?.removeEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    this.#toggleDrawer();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerContainerChange(): void {\r\n    if (this.control && !this.#togglingDrawer) {\r\n      const container = this.control.closest(\"m3e-drawer-container\");\r\n      if (container) {\r\n        this.#updateToggle(container, true);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #toggleDrawer(): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    const container = this.control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      this.#togglingDrawer = true;\r\n      try {\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        await this.#updateToggle(container, false);\r\n      } finally {\r\n        this.#togglingDrawer = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updateToggle(container: M3eDrawerContainerElement, syncToggle: boolean): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    let selected = false;\r\n    if (this.control.slot === \"start\") {\r\n      selected = container.start;\r\n    } else if (this.control.slot === \"end\") {\r\n      selected = container.end;\r\n    }\r\n\r\n    this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n    if (syncToggle && this.parentElement.hasAttribute(\"toggle\")) {\r\n      this.parentElement.toggleAttribute(\"selected\", selected);\r\n    }\r\n\r\n    if (this.parentElement instanceof LitElement) {\r\n      // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n      await (this.parentElement as LitElement).updateComplete;\r\n      this.parentElement.ariaPressed = null;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-toggle\": M3eDrawerToggleElement;\r\n  }\r\n}\r\n"],"names":["DrawerContainerToken","unsafeCSS","DesignToken","color","surface","elevation","level0","shape","corner","large","surfaceContainerLow","level1","outline","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","this","_startMode","_endMode","_M3eDrawerContainerElement_breakpointUnobserve","set","_M3eDrawerContainerElement_disableStartFocusTrap","_M3eDrawerContainerElement_disableEndFocusTrap","_M3eDrawerContainerElement_resizeController","ResizeController","target","skipInitial","callback","entries","__classPrivateFieldGet","_M3eDrawerContainerElement_instances","_M3eDrawerContainerElement_handleDrawerResize","call","start","startMode","startDivider","end","endMode","endDivider","connectedCallback","super","addCustomState","disconnectedCallback","_M3eDrawerContainerElement_clearMode","willUpdate","changedProperties","has","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","_M3eDrawerContainerElement_updateMode","dispatchEvent","Event","bubbles","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","e","hasAssignedNodes","entry","borderSize","Array","isArray","borderBoxSize","classList","contains","style","setProperty","inlineSize","hasCustomState","offsetTop","deleteCustomState","breakpoints","autoClose","autoCloseStart","autoCloseEnd","get","Medium","styles","__decorate","state","prototype","property","type","Boolean","reflect","attribute","customElement","M3eDrawerToggleElement","HtmlFor","ActionElementBase","_M3eDrawerToggleElement_drawerContainerChangeHandler","_M3eDrawerToggleElement_instances","_M3eDrawerToggleElement_handleDrawerContainerChange","_M3eDrawerToggleElement_togglingDrawer","attach","control","htmlFor","parentElement","addAriaReferencedId","container","closest","addEventListener","detach","removeAriaReferencedId","ariaExpanded","removeEventListener","_onClick","_M3eDrawerToggleElement_toggleDrawer","async","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}
+{"version":3,"file":"drawer-container.min.js","sources":["../../src/drawer-container/styles/DrawerContainerToken.ts","../../src/drawer-container/styles/DrawerContainerStyle.ts","../../src/drawer-container/DrawerContainerElement.ts","../../src/drawer-container/DrawerToggleElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-drawer-container-color, ${DesignToken.color.surface})`),\r\n  containerElevation: unsafeCSS(`var(--m3e-drawer-container-elevation, ${DesignToken.elevation.level0})`),\r\n  containerWidth: unsafeCSS(`var(--m3e-drawer-container-width, 22.5rem)`),\r\n  scrimOpacity: unsafeCSS(\"var(--m3e-drawer-container-scrim-opacity, 32%)\"),\r\n  cornerShape: unsafeCSS(`var(--m3e-modal-drawer-corner-shape, ${DesignToken.shape.corner.large})`),\r\n  modalContainerColor: unsafeCSS(`var(--m3e-modal-drawer-container-color, ${DesignToken.color.surfaceContainerLow})`),\r\n  modalContainerElevation: unsafeCSS(`var(--m3e-modal-drawer-elevation, ${DesignToken.elevation.level1})`),\r\n  dividerColor: unsafeCSS(`var(--m3e-drawer-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(\"var(--m3e-drawer-divider-thickness, 1px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { DrawerContainerToken } from \"./DrawerContainerToken\";\r\n\r\n/**\r\n * Styles for `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n  }\r\n  .start,\r\n  .end {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 3;\r\n    outline: none;\r\n    overflow-x: hidden;\r\n    overflow-y: auto;\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n    box-sizing: border-box;\r\n    background-color: ${DrawerContainerToken.containerColor};\r\n    box-shadow: ${DrawerContainerToken.containerElevation};\r\n    transition: ${unsafeCSS(\r\n      `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  .start {\r\n    inset-inline-start: 0;\r\n  }\r\n  .end {\r\n    inset-inline-end: 0;\r\n  }\r\n  :host(:not([start])) .start {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([start]):not(:dir(rtl))) .start {\r\n    margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([start]):dir(rtl)) .start {\r\n    margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([start]:not(:dir(rtl))) .start {\r\n    margin-left: 0;\r\n  }\r\n  :host([start]:dir(rtl)) .start {\r\n    margin-right: 0;\r\n  }\r\n  :host(:not([end])) .end {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([end]):not(:dir(rtl))) .end {\r\n    margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([end]):dir(rtl)) .end {\r\n    margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([end]:not(:dir(rtl))) .end {\r\n    margin-right: 0;\r\n  }\r\n  :host([end]:dir(rtl)) .end {\r\n    margin-left: 0;\r\n  }\r\n  ::slotted([slot=\"start\"]),\r\n  ::slotted([slot=\"end\"]) {\r\n    height: 100%;\r\n    width: ${DrawerContainerToken.containerWidth};\r\n    box-sizing: border-box;\r\n  }\r\n  .content {\r\n    position: relative;\r\n    height: 100%;\r\n    overflow: auto;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:state(-start-push)[start]:not(:dir(rtl))) .content,\r\n  :host(:state(-start-side)[start]:not(:dir(rtl))) .content {\r\n    margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-start-push)[start]:dir(rtl)) .content,\r\n  :host(:state(-start-side)[start]:dir(rtl)) .content {\r\n    margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:not(:dir(rtl))) .content,\r\n  :host(:state(-end-side)[end]:not(:dir(rtl))) .content {\r\n    margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:dir(rtl)) .content,\r\n  :host(:state(-end-side)[end]:dir(rtl)) .content {\r\n    margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  .scrim {\r\n    display: block;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    background-color: ${DesignToken.color.scrim};\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: ${unsafeCSS(\r\n      `opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, \r\n        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    .scrim {\r\n      opacity: 0;\r\n    }\r\n  }\r\n  :host(:state(-start-push)[start]) .scrim,\r\n  :host(:state(-end-push)[end]) .scrim,\r\n  :host(:state(-start-over)[start]) .scrim,\r\n  :host(:state(-end-over)[end]) .scrim {\r\n    visibility: visible;\r\n    opacity: ${DrawerContainerToken.scrimOpacity};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-start-over)) .start {\r\n    border-start-end-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-end-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-end-over)) .end {\r\n    border-start-start-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-start-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-start-over)) .start,\r\n  :host(:state(-end-over)) .end {\r\n    background-color: ${DrawerContainerToken.modalContainerColor};\r\n    box-shadow: ${DrawerContainerToken.modalContainerElevation};\r\n  }\r\n  :host([start-divider]) .start {\r\n    border-inline-end-color: transparent;\r\n    border-inline-end-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-end-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n    border-inline-end-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host([end-divider]) .end {\r\n    border-inline-start-color: transparent;\r\n    border-inline-start-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-start-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n    border-inline-start-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host(:state(-no-animate)) .start,\r\n  :host(:state(-no-animate)) .end,\r\n  :host(:state(-no-animate)) .content {\r\n    transition: none;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .start,\r\n    .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      transition: ${unsafeCSS(\r\n        `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:state(-start-push)) .start,\r\n    :host(:state(-end-push)) .end,\r\n    :host(:state(-start-over)) .start,\r\n    :host(:state(-end-over)) .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      border-color: CanvasText;\r\n    }\r\n    .start,\r\n    .end {\r\n      border-style: solid;\r\n      border-color: Canvas;\r\n      border-width: 1px;\r\n    }\r\n    .start {\r\n      border-inline-start-style: none;\r\n    }\r\n    .end {\r\n      border-inline-end-style: none;\r\n    }\r\n    :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n      border-inline-end-color: GrayText;\r\n    }\r\n    :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n      border-inline-start-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .start,\r\n    .end,\r\n    .content,\r\n    .scrim {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { DrawerMode } from \"./DrawerMode\";\r\n\r\nimport { DrawerContainerStyle } from \"./styles\";\r\n\r\n/**\r\n * A container for one or two sliding drawers.\r\n *\r\n * @description\r\n * A responsive layout container that manages left and right drawers alongside main content.\r\n * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.\r\n * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,\r\n * and permanent navigation.\r\n *\r\n * @example\r\n * The following example illustrates a typical drawer layout.\r\n * ```html\r\n * <m3e-drawer-container>\r\n *  <nav slot=\"start\">\r\n *    <!-- Start drawer content -->\r\n *  </nav>\r\n *  <main>\r\n *    <!-- Main content -->\r\n *  </main>\r\n *  <aside slot=\"end\">\r\n *    <!-- End drawer content -->\r\n *  </aside>\r\n * <m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-container\r\n *\r\n * @slot - Renders the main content.\r\n * @slot start - Renders the start drawer.\r\n * @slot end - Renders the end drawer.\r\n *\r\n * @attr end - Whether the end drawer is open.\r\n * @attr end-mode - The behavior mode of the end drawer.\r\n * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.\r\n * @attr start - Whether the start drawer is open.\r\n * @attr start-mode - The behavior mode of the start drawer.\r\n * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.\r\n *\r\n * @fires change - Emitted when the state of the start or end drawers change.\r\n *\r\n * @cssprop --m3e-drawer-container-color - The background color of the drawer container.\r\n * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.\r\n * @cssprop --m3e-drawer-container-width - The width of the drawer container.\r\n * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.\r\n * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer's start edge (typically left in LTR).\r\n * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer's end edge (typically right in LTR).\r\n * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.\r\n * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.\r\n * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.\r\n * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.\r\n */\r\n@customElement(\"m3e-drawer-container\")\r\nexport class M3eDrawerContainerElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = DrawerContainerStyle;\r\n\r\n  /** @private */ @state() private _startMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ @state() private _endMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ #disableStartFocusTrap = false;\r\n  /** @private */ #disableEndFocusTrap = false;\r\n\r\n  /** @private */\r\n  #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (entries) => this.#handleDrawerResize(entries),\r\n  });\r\n\r\n  /**\r\n   * Whether the start drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) start = false;\r\n\r\n  /**\r\n   * The behavior mode of the start drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-mode\", reflect: true }) startMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the start drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-divider\", type: Boolean, reflect: true }) startDivider = false;\r\n\r\n  /**\r\n   * Whether the end drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) end = false;\r\n\r\n  /**\r\n   * The behavior mode of the end drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-mode\", reflect: true }) endMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the end drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-divider\", type: Boolean, reflect: true }) endDivider = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"-no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#breakpointUnobserve?.();\r\n    this.#clearMode();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"startMode\") || changedProperties.has(\"endMode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this.#updateMode();\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"start\")) {\r\n      if (this.start && this.end && this._endMode !== \"side\") {\r\n        this.end = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n\r\n    if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"start\">\r\n        <m3e-focus-trap ?disabled=\"${!this.start || this._startMode === \"side\" || this.#disableStartFocusTrap}\">\r\n          <slot name=\"start\" @slotchange=\"${this.#handleStartSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        .inert=\"${(this._startMode !== \"side\" || this._endMode !== \"side\") && (this.start || this.end)}\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n      <div class=\"scrim\" @click=\"${this.#handleScrimClick}\"></div>\r\n      <div class=\"end\">\r\n        <m3e-focus-trap ?disabled=\"${!this.end || this._endMode === \"side\" || this.#disableEndFocusTrap}\">\r\n          <slot name=\"end\" @slotchange=\"${this.#handleEndSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    let drawer = this.shadowRoot?.querySelector<HTMLElement>(\".start\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n    drawer = this.shadowRoot?.querySelector(\".end\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n  }\r\n\r\n  /** @private */\r\n  #handleScrimClick() {\r\n    if (this._startMode !== \"side\") {\r\n      this.start = false;\r\n    }\r\n    if (this._endMode !== \"side\") {\r\n      this.end = false;\r\n    }\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleStartSlotChange(e: Event): void {\r\n    this.#disableStartFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleEndSlotChange(e: Event): void {\r\n    this.#disableEndFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerResize(entries: ResizeObserverEntry[]): void {\r\n    for (const entry of entries) {\r\n      const borderSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)\r\n        ? entry.borderBoxSize[0]\r\n        : entry.borderBoxSize;\r\n\r\n      if (entry.target.classList.contains(\"start\")) {\r\n        this.style.setProperty(\"--_start-drawer-size\", `${borderSize.inlineSize}px`);\r\n      } else if (entry.target.classList.contains(\"end\")) {\r\n        this.style.setProperty(\"--_end-drawer-size\", `${borderSize.inlineSize}px`);\r\n      }\r\n    }\r\n\r\n    if (hasCustomState(this, \"-no-animate\")) {\r\n      // Force synchronous layout flush\r\n      void this.offsetTop;\r\n      deleteCustomState(this, \"-no-animate\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) =>\r\n      this.#updateMode(matches, true),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #clearMode(): void {\r\n    deleteCustomState(this, \"-start-over\");\r\n    deleteCustomState(this, \"-start-push\");\r\n    deleteCustomState(this, \"-start-side\");\r\n    deleteCustomState(this, \"-end-over\");\r\n    deleteCustomState(this, \"-end-push\");\r\n    deleteCustomState(this, \"-end-side\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #updateMode(breakpoints?: Map<string, boolean>, autoClose = false) {\r\n    let autoCloseStart = false,\r\n      autoCloseEnd = false;\r\n    if (this.startMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._startMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseStart = this._startMode === \"side\" && this.start;\r\n        this._startMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseStart = this._startMode !== \"over\" && this.start;\r\n        this._startMode = \"over\";\r\n      } else {\r\n        this._startMode = \"side\";\r\n      }\r\n    } else {\r\n      this._startMode = this.startMode;\r\n    }\r\n\r\n    if (this.endMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._endMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseEnd = this._endMode === \"side\" && this.end;\r\n        this._endMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseEnd = this._endMode !== \"over\" && this.end;\r\n        this._endMode = \"over\";\r\n      } else {\r\n        this._endMode = \"side\";\r\n      }\r\n    } else {\r\n      this._endMode = this.endMode;\r\n    }\r\n\r\n    this.#clearMode();\r\n\r\n    addCustomState(this, `-start-${this._startMode}`);\r\n    addCustomState(this, `-end-${this._endMode}`);\r\n\r\n    if (autoClose && (autoCloseStart || autoCloseEnd)) {\r\n      if (autoCloseStart) {\r\n        this.start = false;\r\n      }\r\n      if (autoCloseEnd) {\r\n        this.end = false;\r\n      }\r\n\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-container\": M3eDrawerContainerElement;\r\n  }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eDrawerContainerElement } from \"./DrawerContainerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the opened state of a drawer.\r\n *\r\n * @example\r\n * The following example illustrates the use of a `m3e-drawer-toggle`, nested inside a `m3e-icon-button` component,\r\n * which toggles the open state of the start drawer.\r\n *\r\n * ```html\r\n * <m3e-icon-button slot=\"leading-icon\" aria-label=\"Menu\" toggle selected>\r\n *   <m3e-drawer-toggle for=\"startDrawer\"></m3e-drawer-toggle>\r\n *   <m3e-icon name=\"menu\"></m3e-icon>\r\n *   <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * </m3e-icon-button>\r\n *\r\n * <m3e-drawer-container start>\r\n *   <nav slot=\"start\" id=\"startDrawer\" aria-label=\"Navigation\">\r\n *     <!-- Start drawer content -->\r\n *   </nav>\r\n *   <!-- Container content -->\r\n * </m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-toggle\r\n */\r\n@customElement(\"m3e-drawer-toggle\")\r\nexport class M3eDrawerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @private */ readonly #drawerContainerChangeHandler = () => this.#handleDrawerContainerChange();\r\n  /** @private */ #togglingDrawer = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.htmlFor && this.parentElement) {\r\n      addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n    }\r\n\r\n    const container = control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      container.addEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n      this.#updateToggle(container, true);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      if (this.htmlFor) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n      }\r\n\r\n      this.parentElement.ariaExpanded = null;\r\n    }\r\n\r\n    this.control?.closest(\"m3e-drawer-container\")?.removeEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    this.#toggleDrawer();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerContainerChange(): void {\r\n    if (this.control && !this.#togglingDrawer) {\r\n      const container = this.control.closest(\"m3e-drawer-container\");\r\n      if (container) {\r\n        this.#updateToggle(container, true);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #toggleDrawer(): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    const container = this.control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      this.#togglingDrawer = true;\r\n      try {\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        await this.#updateToggle(container, false);\r\n      } finally {\r\n        this.#togglingDrawer = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updateToggle(container: M3eDrawerContainerElement, syncToggle: boolean): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    let selected = false;\r\n    if (this.control.slot === \"start\") {\r\n      selected = container.start;\r\n    } else if (this.control.slot === \"end\") {\r\n      selected = container.end;\r\n    }\r\n\r\n    this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n    if (syncToggle && this.parentElement.hasAttribute(\"toggle\")) {\r\n      this.parentElement.toggleAttribute(\"selected\", selected);\r\n    }\r\n\r\n    if (this.parentElement instanceof LitElement) {\r\n      // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n      await (this.parentElement as LitElement).updateComplete;\r\n      this.parentElement.ariaPressed = null;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-toggle\": M3eDrawerToggleElement;\r\n  }\r\n}\r\n"],"names":["DrawerContainerToken","unsafeCSS","DesignToken","color","surface","elevation","level0","shape","corner","large","surfaceContainerLow","level1","outline","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","this","_startMode","_endMode","_M3eDrawerContainerElement_breakpointUnobserve","set","_M3eDrawerContainerElement_disableStartFocusTrap","_M3eDrawerContainerElement_disableEndFocusTrap","_M3eDrawerContainerElement_resizeController","ResizeController","target","skipInitial","callback","entries","__classPrivateFieldGet","_M3eDrawerContainerElement_instances","_M3eDrawerContainerElement_handleDrawerResize","call","start","startMode","startDivider","end","endMode","endDivider","connectedCallback","super","addCustomState","disconnectedCallback","_M3eDrawerContainerElement_clearMode","willUpdate","changedProperties","has","_M3eDrawerContainerElement_initBreakpointMonitoring","_M3eDrawerContainerElement_updateMode","dispatchEvent","Event","bubbles","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","observe","e","__classPrivateFieldSet","hasAssignedNodes","entry","borderSize","Array","isArray","borderBoxSize","classList","contains","style","setProperty","inlineSize","hasCustomState","offsetTop","deleteCustomState","M3eBreakpointObserver","Breakpoint","XSmall","Small","matches","breakpoints","autoClose","autoCloseStart","autoCloseEnd","get","Medium","styles","__decorate","state","prototype","property","type","Boolean","reflect","attribute","customElement","M3eDrawerToggleElement","HtmlFor","ActionElementBase","_M3eDrawerToggleElement_drawerContainerChangeHandler","_M3eDrawerToggleElement_instances","_M3eDrawerToggleElement_handleDrawerContainerChange","_M3eDrawerToggleElement_togglingDrawer","attach","control","htmlFor","parentElement","addAriaReferencedId","container","closest","addEventListener","detach","removeAriaReferencedId","ariaExpanded","removeEventListener","_onClick","_M3eDrawerToggleElement_toggleDrawer","async","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}

package/dist/fab-menu.js

@@ -212,7 +212,7 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, await positionAnchor(this, trigger, {
       position: "top-end",
       inline: true,
-      shift: true,
+      shift: "main",
       flip: true,
       offset: 8
     }, (x, y, position) => {

package/dist/fab-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:state(-no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:state(-left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:state(-right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:state(-no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: true,\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"-right\", position.includes(\"end\"));\r\n        setCustomState(this, \"-left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}
+{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:state(-no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:state(-left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:state(-right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:state(-no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"-right\", position.includes(\"end\"));\r\n        setCustomState(this, \"-left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}

package/dist/fab-menu.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{query as s,property as l}from"lit/decorators.js";import{KeyboardClick as c,LinkButton as d,Disabled as m,AttachInternals as h,Role as f,renderPseudoLink as p,DesignToken as b,customElement as u,SuppressInitialAnimation as v,ScrollController as g,setCustomState as y,HtmlFor as k,ActionElementBase as w}from"@m3e/web/core";import{RovingTabIndexManager as $,addAriaReferencedId as x,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{positionAnchor as C}from"@m3e/web/core/anchoring";var W,M,L;let S=class extends(c(d(m(h(f(o,"menuitem"),!0))))){constructor(){super(...arguments),W.add(this),M.set(this,t=>e(this,W,"m",L).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,M,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,M,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><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>${this[p]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};var P,I,T,z,A,H,j,K,X,O,R,U,q,D;M=new WeakMap,W=new WeakSet,L=function(e){e.defaultPrevented||this.menu?.hide(!0)},S.styles=n`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`,t([s(".elevation")],S.prototype,"_elevation",void 0),t([s(".focus-ring")],S.prototype,"_focusRing",void 0),t([s(".state-layer")],S.prototype,"_stateLayer",void 0),t([s(".ripple")],S.prototype,"_ripple",void 0),S=t([u("m3e-fab-menu-item")],S);let G=class extends(v(h(f(o,"menu")))){constructor(){super(...arguments),P.add(this),I.set(this,void 0),T.set(this,void 0),z.set(this,void 0),A.set(this,(new $).withWrap().withHomeAndEnd().withVerticalOrientation()),H.set(this,t=>e(this,P,"m",R).call(this,t)),j.set(this,t=>e(this,P,"m",U).call(this,t)),K.set(this,new g(this,{target:null,callback:()=>this.hide()})),X.set(this,t=>{"closed"===t.newState?(e(this,z,"f")?.call(this),i(this,z,void 0,"f")):setTimeout(()=>{e(this,A,"f").setActiveItem(e(this,A,"f").items.find(e=>!e.disabled))},40)}),this.variant="primary"}get isOpen(){return void 0!==e(this,T,"f")}async show(t){e(this,T,"f")&&e(this,T,"f")!==t&&this.hide(),e(this,z,"f")?.call(this),i(this,z,await C(this,t,{position:"top-end",inline:!0,shift:!0,flip:!0,offset:8},(e,t,i)=>{y(this,"-right",i.includes("end")),y(this,"-left",i.includes("start")),"rtl"===_.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),i(this,T,t,"f"),e(this,T,"f").ariaExpanded="true",e(this,K,"f").observe(e(this,T,"f")),e(this,P,"m",q).call(this)}hide(t=!1){e(this,z,"f")?.call(this),i(this,z,void 0,"f"),e(this,T,"f")&&(e(this,T,"f").ariaExpanded="false",t&&e(this,T,"f").focus(),e(this,P,"m",D).call(this),e(this,K,"f").unobserve(e(this,T,"f")),i(this,T,void 0,"f")),this.hidePopover()}async toggle(t){e(this,T,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,H,"f")),this.addEventListener("toggle",e(this,X,"f")),document.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,H,"f")),this.removeEventListener("toggle",e(this,X,"f")),document.removeEventListener("click",e(this,j,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,P,"m",O)}"></slot></div>`}};I=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,j=new WeakMap,K=new WeakMap,X=new WeakMap,P=new WeakSet,O=function(){const{added:t}=e(this,A,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,A,"f").activeItem||e(this,A,"f").updateActiveItem(t.find(e=>!e.disabled))},R=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,A,"f").onKeyDown(t)}},U=function(t){t.composedPath().some(t=>t instanceof S||t===e(this,T,"f"))||this.hide()},q=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(i(this,I,t.tabIndex,"f"),t.addEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items,t]))},D=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(void 0!==e(this,I,"f")&&(t.tabIndex=e(this,I,"f")),t.removeEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items.filter(e=>e!==t)]))},G.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:state(-no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,t([l({reflect:!0})],G.prototype,"variant",void 0),G=t([u("m3e-fab-menu")],G);let V=class extends(k(w)){get menu(){return this.control instanceof G?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof G&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&x(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=t([u("m3e-fab-menu-trigger")],V);export{G as M3eFabMenuElement,S as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{query as s,property as l}from"lit/decorators.js";import{KeyboardClick as c,LinkButton as d,Disabled as m,AttachInternals as h,Role as f,renderPseudoLink as p,DesignToken as b,customElement as u,SuppressInitialAnimation as v,ScrollController as g,setCustomState as y,HtmlFor as k,ActionElementBase as w}from"@m3e/web/core";import{RovingTabIndexManager as $,addAriaReferencedId as x,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{positionAnchor as C}from"@m3e/web/core/anchoring";var W,M,L;let S=class extends(c(d(m(h(f(o,"menuitem"),!0))))){constructor(){super(...arguments),W.add(this),M.set(this,t=>e(this,W,"m",L).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,M,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,M,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><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>${this[p]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};var P,I,T,z,A,H,j,K,X,O,R,U,q,D;M=new WeakMap,W=new WeakSet,L=function(e){e.defaultPrevented||this.menu?.hide(!0)},S.styles=n`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`,t([s(".elevation")],S.prototype,"_elevation",void 0),t([s(".focus-ring")],S.prototype,"_focusRing",void 0),t([s(".state-layer")],S.prototype,"_stateLayer",void 0),t([s(".ripple")],S.prototype,"_ripple",void 0),S=t([u("m3e-fab-menu-item")],S);let G=class extends(v(h(f(o,"menu")))){constructor(){super(...arguments),P.add(this),I.set(this,void 0),T.set(this,void 0),z.set(this,void 0),A.set(this,(new $).withWrap().withHomeAndEnd().withVerticalOrientation()),H.set(this,t=>e(this,P,"m",R).call(this,t)),j.set(this,t=>e(this,P,"m",U).call(this,t)),K.set(this,new g(this,{target:null,callback:()=>this.hide()})),X.set(this,t=>{"closed"===t.newState?(e(this,z,"f")?.call(this),i(this,z,void 0,"f")):setTimeout(()=>{e(this,A,"f").setActiveItem(e(this,A,"f").items.find(e=>!e.disabled))},40)}),this.variant="primary"}get isOpen(){return void 0!==e(this,T,"f")}async show(t){e(this,T,"f")&&e(this,T,"f")!==t&&this.hide(),e(this,z,"f")?.call(this),i(this,z,await C(this,t,{position:"top-end",inline:!0,shift:"main",flip:!0,offset:8},(e,t,i)=>{y(this,"-right",i.includes("end")),y(this,"-left",i.includes("start")),"rtl"===_.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),i(this,T,t,"f"),e(this,T,"f").ariaExpanded="true",e(this,K,"f").observe(e(this,T,"f")),e(this,P,"m",q).call(this)}hide(t=!1){e(this,z,"f")?.call(this),i(this,z,void 0,"f"),e(this,T,"f")&&(e(this,T,"f").ariaExpanded="false",t&&e(this,T,"f").focus(),e(this,P,"m",D).call(this),e(this,K,"f").unobserve(e(this,T,"f")),i(this,T,void 0,"f")),this.hidePopover()}async toggle(t){e(this,T,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,H,"f")),this.addEventListener("toggle",e(this,X,"f")),document.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,H,"f")),this.removeEventListener("toggle",e(this,X,"f")),document.removeEventListener("click",e(this,j,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,P,"m",O)}"></slot></div>`}};I=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,j=new WeakMap,K=new WeakMap,X=new WeakMap,P=new WeakSet,O=function(){const{added:t}=e(this,A,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,A,"f").activeItem||e(this,A,"f").updateActiveItem(t.find(e=>!e.disabled))},R=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,A,"f").onKeyDown(t)}},U=function(t){t.composedPath().some(t=>t instanceof S||t===e(this,T,"f"))||this.hide()},q=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(i(this,I,t.tabIndex,"f"),t.addEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items,t]))},D=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(void 0!==e(this,I,"f")&&(t.tabIndex=e(this,I,"f")),t.removeEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items.filter(e=>e!==t)]))},G.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:state(-no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,t([l({reflect:!0})],G.prototype,"variant",void 0),G=t([u("m3e-fab-menu")],G);let V=class extends(k(w)){get menu(){return this.control instanceof G?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof G&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&x(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=t([u("m3e-fab-menu-trigger")],V);export{G as M3eFabMenuElement,S as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
 //# sourceMappingURL=fab-menu.min.js.map