@m3e/web 2.5.13 → 2.5.14

package/dist/slider.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 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 a,html as s,unsafeCSS as r,css as l}from"lit";import{query as h,property as n,state as c}from"lit/decorators.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{Dirty as d,Touched as m,FormAssociated as p,Focusable as v,Disabled as u,AttachInternals as b,Role as f,formValue as k,DesignToken as g,customElement as x,ResizeController as y,safeStyleMap as $,hasCustomState as _,deleteCustomState as w,prefersReducedMotion as T,addCustomState as z}from"@m3e/web/core";import{M3eDirectionality as E}from"@m3e/web/core/bidi";var M,S;let P=class extends(d(m(p(v(u(b(f(a,"slider")))))))){constructor(){super(...arguments),M.add(this),this.value=null}get[(M=new WeakSet,k)](){return this.value?.toString()??null}focus(e){this._focusRing&&(this._focusRing.disabled=!0),super.focus(e),this._focusRing&&(this._focusRing.disabled=this.disabled)}firstUpdated(e){super.firstUpdated(e),this._focusRing?.attach(this)}update(e){super.update(e),e.has("value")&&this.dispatchEvent(new Event("value-change",{bubbles:!0}))}render(){return s`<div class="label" aria-hidden="true">${e(this,M,"a",S)}</div><div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="handle"></div></div></div>`}};var C,W,L,D,R,A,j,U,H,N,B,G,I,V,O,X,q,F,J,K,Q,Y,Z,ee;S=function(){return this.closest("m3e-slider")?.displayWith?.(this.value)??this.value?.toString()??""},P.styles=l`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${g.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${r(`opacity ${g.motion.duration.short3} ${g.motion.easing.standard}, \n          transform ${g.motion.duration.short3} ${g.motion.easing.standard},\n          visibility ${g.motion.duration.short3} ${g.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${g.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${g.color.inverseSurface}); color: var(--m3e-slider-label-color, ${g.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${g.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${g.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${g.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${g.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${r(`width ${g.motion.duration.short2} ${g.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${g.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${g.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`,t([h(".focus-ring")],P.prototype,"_focusRing",void 0),t([n({type:Number,reflect:!0})],P.prototype,"value",void 0),P=t([x("m3e-slider-thumb")],P);let te=class extends(b(a)){constructor(){super(),C.add(this),W.set(this,void 0),this._ticks=new Array,L.set(this,new Set),D.set(this,new Array),R.set(this,void 0),A.set(this,0),j.set(this,0),U.set(this,0),this.size="extra-small",this.disabled=!1,this.discrete=!1,this.min=0,this.max=100,this.step=1,this.labelled=!1,this.displayWith=null,new y(this,{callback:()=>e(this,C,"m",O).call(this,!0)})}get thumbs(){return e(this,D,"f")}get isRange(){return e(this,D,"f").length>1}get thumb(){return e(this,D,"f")[0]??null}get lowerThumb(){return this.thumb}get upperThumb(){return e(this,D,"f")[1]??null}connectedCallback(){super.connectedCallback(),i(this,W,E.observe(()=>{e(this,C,"m",O).call(this,!0),this.requestUpdate()}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,L,"f").clear(),e(this,W,"f")?.call(this)}updated(t){super.updated(t),t.has("disabled")&&e(this,D,"f").forEach(e=>e.disabled=this.disabled)}render(){return s`<div class="base" tabindex="${o(this.disabled?void 0:"-1")}" @pointerdown="${e(this,C,"m",q)}" @pointermove="${e(this,C,"m",F)}" @pointerup="${e(this,C,"m",J)}" @keydown="${e(this,C,"m",K)}" @keyup="${e(this,C,"m",Q)}" @value-change="${e(this,C,"m",Y)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(t=>e(this,C,"m",H).call(this,t))}</div><slot @slotchange="${e(this,C,"m",N)}"></slot></div>`}};W=new WeakMap,L=new WeakMap,D=new WeakMap,R=new WeakMap,A=new WeakMap,j=new WeakMap,U=new WeakMap,C=new WeakSet,H=function(t){return s`<div class="tick ${t.active?"active":"inactive"}" style="${$({transform:`translate(${"rtl"===E.current?-e(this,C,"m",G).call(this,t.value):e(this,C,"m",G).call(this,t.value)}px, 0)`})}"></div>`},N=function(t){i(this,D,t.target.assignedElements({flatten:!0}).filter(e=>e instanceof P),"f"),e(this,D,"f").length>2&&(e(this,D,"f").length=2),this.isRange?this._base?.style.setProperty("--_slider-active-track-middle-shape","0"):this._base?.style.removeProperty("--_slider-active-track-middle-shape"),e(this,C,"m",B).call(this)},B=function(){e(this,D,"f").forEach((t,i)=>{this.disabled&&(t.disabled=!0),t.ariaValueMin=`${e(this,D,"f")[i-1]?.value??this.min}`,t.ariaValueMax=`${e(this,D,"f")[i+1]?.value??this.max}`,t.ariaValueNow=`${t.value??e(this,D,"f")[i-1]?.value??this.min}`})},G=function(t){return(e(this,A,"f")-e(this,j,"f"))*((t-this.min)/(this.max-this.min))},I=function(t){const i="rtl"===E.current?e(this,U,"f")+e(this,A,"f")-t.clientX:t.clientX-e(this,U,"f"),a=0===this.step?1:this.step,s=Math.floor((this.max-this.min)/a),r=i/e(this,A,"f"),l=Math.round(r*s)/s*(this.max-this.min)+this.min;return Math.round(l/a)*a},V=function(t=!1){this.lowerThumb&&(i(this,A,!t&&e(this,A,"f")>0?e(this,A,"f"):this.clientWidth,"f"),i(this,j,!t&&e(this,j,"f")>0?e(this,j,"f"):this.lowerThumb.clientWidth,"f"),i(this,U,!t&&e(this,U,"f")>0?e(this,U,"f"):this.getBoundingClientRect().left,"f"))},O=function(t=!1){if(e(this,C,"m",V).call(this,t),!this.lowerThumb)return;const i=this.lowerThumb.value??this.min,a=e(this,C,"m",G).call(this,i);if(this.lowerThumb.style.transform=`translate(${"rtl"===E.current?-a:a}px, 0)`,this.upperThumb){const t=this.upperThumb.value??i,s=e(this,C,"m",G).call(this,t);this.upperThumb.style.transform=`translate(${"rtl"===E.current?-s:s}px, 0)`,this._base?.classList.toggle("range",!0),this._base?.style.setProperty("--_slider-inactive-track-before-size",`${a}px`),this._base?.style.setProperty("--_slider-active-track-offset",`${a+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-active-track-size",s-a-e(this,j,"f")+"px"),this._base?.style.setProperty("--_slider-inactive-track-after-offset",`${s+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-inactive-track-after-size",e(this,A,"f")-e(this,j,"f")-s+"px"),e(this,C,"m",X).call(this,e=>e>i&&e<t)}else this._base?.classList.toggle("range",!1),this._base?.style.setProperty("--_slider-active-track-size",`${a}px`),this._base?.style.setProperty("--_slider-inactive-track-after-offset",`${a+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-inactive-track-after-size",e(this,A,"f")-a-e(this,j,"f")+"px"),e(this,C,"m",X).call(this,e=>e<i)},X=function(e){if(this._ticks=[],this.discrete&&this.step>1)for(let t=this.min;t<=this.max;t+=this.step)this._ticks.push({value:t,active:e(t)});else this._ticks.push({value:this.min,active:e(this.min)}),this.min<0&&this.max>0&&this._ticks.push({value:0,active:e(0)}),this._ticks.push({value:this.max,active:e(this.max)})},q=function(t){if("mouse"===t.pointerType&&t.button>1)return;if(!this.lowerThumb||this.disabled)return;if(t.target instanceof HTMLElement&&t.target.setPointerCapture(t.pointerId),e(this,L,"f").clear(),i(this,R,t.composedPath().find(e=>e instanceof P),"f"),e(this,R,"f"))return;const a=e(this,C,"m",I).call(this,t);if(this.upperThumb){const t=this.lowerThumb.value??this.min,s=this.upperThumb.value??t;if(a<t)this.lowerThumb.disabled||(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f"));else if(a>s)this.upperThumb.disabled||(e(this,C,"m",Z).call(this,this.upperThumb,a,!0),i(this,R,this.upperThumb,"f"));else{a<(t+s)/2&&!this.lowerThumb.disabled?(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f")):this.upperThumb.disabled||(e(this,C,"m",Z).call(this,this.upperThumb,a,!0),i(this,R,this.upperThumb,"f"))}}else this.lowerThumb.disabled||(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f"))},F=function(t){if(!(t.target instanceof HTMLElement)||!t.target.hasPointerCapture(t.pointerId)||!e(this,R,"f")||e(this,R,"f").disabled)return;const i=e(this,C,"m",I).call(this,t);let a=this.min,s=this.max;e(this,R,"f")===this.upperThumb?a=Math.max(a,this.lowerThumb?.value??0):this.upperThumb&&(s=Math.min(s,this.upperThumb.value??this.max)),_(this,"--animating")&&(w(this,"--animating"),e(this,R,"f").style.transition=""),e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(s,Math.max(a,i)))},J=function(t){"mouse"===t.pointerType&&t.button>1||this.lowerThumb&&!this.disabled&&(t.target instanceof HTMLElement&&t.target.releasePointerCapture(t.pointerId),e(this,R,"f")&&!e(this,R,"f").disabled&&(e(this,C,"m",ee).call(this,e(this,R,"f")),e(this,R,"f").focus()))},K=function(t){if(i(this,R,t.composedPath().find(e=>e instanceof P),"f"),!e(this,R,"f"))return;const a=e(this,R,"f").value??0;let s=this.min,r=this.max;switch(e(this,R,"f")===this.upperThumb?s=Math.max(s,this.lowerThumb?.value??0):this.upperThumb&&(r=Math.max(r,this.upperThumb.value??this.max)),t.key){case"Home":e(this,C,"m",Z).call(this,e(this,R,"f"),s),t.preventDefault();break;case"End":e(this,C,"m",Z).call(this,e(this,R,"f"),r),t.preventDefault();break;case"PageUp":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+(this.step>1?this.step:10))):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-(this.step>1?this.step:10))),t.preventDefault();break;case"PageDown":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-(this.step>1?this.step:10))):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+(this.step>1?this.step:10))),t.preventDefault();break;case"Down":case"ArrowDown":case"Left":case"ArrowLeft":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-this.step)):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+this.step)),t.preventDefault();break;case"Up":case"ArrowUp":case"Right":case"ArrowRight":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+this.step)):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-this.step)),t.preventDefault();break;case" ":t.preventDefault()}},Q=function(t){const i=t.composedPath().find(e=>e instanceof P);i&&e(this,C,"m",ee).call(this,i)},Y=function(t){t.stopPropagation(),e(this,C,"m",B).call(this),e(this,C,"m",O).call(this)},Z=function(t,i,a=!1){t.value!==i&&t.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(a&&!T()&&(z(this,"--animating"),t.addEventListener("transitionend",()=>{t.style.transition="",w(this,"--animating")},{once:!0}),t.style.transition=`transform ${g.motion.spring.fastEffects}`),e(this,L,"f").add(t),t.value=i,t.markAsDirty(),t.markAsTouched(),t.dispatchEvent(new Event("input",{bubbles:!0})))},ee=function(t){e(this,L,"f").has(t)&&(t.dispatchEvent(new Event("change",{bubbles:!0})),e(this,L,"f").delete(t))},te.styles=l`:host { display: inline-block; vertical-align: middle; min-inline-size: var(--m3e-slider-min-width, 12.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([disabled])) { cursor: pointer; } :host([size="extra-small"]), :host([size="small"]) { height: var(--m3e-slider-small-height, 2.75rem); } :host(:not(:dir(rtl))[size="extra-small"]) .base, :host(:not(:dir(rtl))[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${g.shape.corner.smallStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${g.shape.corner.smallStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${g.shape.corner.smallEnd} ); } :host(:dir(rtl)[size="extra-small"]) .base, :host(:dir(rtl)[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${g.shape.corner.smallEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${g.shape.corner.smallEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${g.shape.corner.smallStart} ); } :host([size="extra-small"]) .track { height: calc(var(--m3e-slider-extra-small-track-height, 1rem)); } :host([size="small"]) .track { height: calc(var(--m3e-slider-small-track-height, 1.5rem)); } :host([size="medium"]) { height: var(--m3e-slider-medium-height, 3.25rem); } :host(:not(:dir(rtl))[size="medium"]) .base { --_slider-active-track-shape: var( --m3e-slider-medium-active-track-shape, ${g.shape.corner.mediumStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${g.shape.corner.mediumStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${g.shape.corner.mediumEnd} ); } :host(:dir(rtl)[size="medium"]) .base { --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${g.shape.corner.mediumEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${g.shape.corner.mediumEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${g.shape.corner.mediumStart} ); } :host([size="medium"]) .track { height: var(--m3e-slider-medium-track-height, 2.5rem); } :host([size="large"]) { height: var(--m3e-slider-large-height, 4.25rem); } :host(:not(:dir(rtl))[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${g.shape.corner.largeStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${g.shape.corner.largeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${g.shape.corner.largeEnd} ); } :host(:dir(rtl)[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${g.shape.corner.largeEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${g.shape.corner.largeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${g.shape.corner.largeStart} ); } :host([size="large"]) .track { height: var(--m3e-slider-large-track-height, 3.5rem); } :host([size="extra-large"]) { height: var(--m3e-slider-extra-large-height, 6.75rem); } :host(:not(:dir(rtl))[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${g.shape.corner.extraLargeStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${g.shape.corner.extraLargeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${g.shape.corner.extraLargeEnd} ); } :host(:dir(rtl)[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${g.shape.corner.extraLargeEnd} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${g.shape.corner.extraLargeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${g.shape.corner.extraLargeStart} ); } :host([size="extra-large"]) .track { height: var(--m3e-slider-extra-large-track-height, 6rem); } :host(:is(:state(--animating), :--animating)) .track-active, :host(:is(:state(--animating), :--animating)) .track-inactive.start, :host(:is(:state(--animating), :--animating)) .track-inactive.end { transition: ${r(`margin-inline-start ${g.motion.spring.fastEffects},\n        width ${g.motion.spring.fastEffects}`)}; } .base { display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; touch-action: none; } .track { position: relative; flex: 1 1 auto; touch-action: none; } .track-inactive, .track-active { position: absolute; height: 100%; touch-action: none; } .track-active { margin-inline-start: var(--_slider-active-track-offset, 0px); width: var(--_slider-active-track-size, 0px); border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape)); } .track-inactive.start { width: var(--_slider-inactive-track-before-size, 0px); border-radius: var(--_slider-inactive-track-start-shape); } .track-inactive.end { margin-inline-start: var(--_slider-inactive-track-after-offset, 0px); width: var(--_slider-inactive-track-after-size, 0px); border-radius: var(--_slider-inactive-track-end-shape); } .ticks { position: absolute; width: 100%; height: var(--m3e-slider-tick-size, 0.25rem); overflow: visible; touch-action: none; } .tick { position: absolute; top: 0; touch-action: none; inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2)); width: var(--m3e-slider-tick-size, 0.25rem); height: var(--m3e-slider-tick-size, 0.25rem); border-radius: var(--m3e-slider-tick-shape, ${g.shape.corner.full}); } :host(:not([disabled])) .track-inactive { background-color: var(--m3e-slider-inactive-track-color, ${g.color.secondaryContainer}); } :host([disabled]) .track-inactive { background-color: color-mix( in srgb, var(--m3e-slider-disabled-inactive-track-color, ${g.color.onSurface}) var(--m3e-slider-disabled-inactive-track-opacity, 12%), transparent ); } :host(:not([disabled])) .track-active { background-color: var(--m3e-slider-active-track-color, ${g.color.primary}); } :host([disabled]) .track-active { background-color: color-mix( in srgb, var(--m3e-slider-disabled-active-track-color, ${g.color.onSurface}) var(--m3e-slider-disabled-active-track-opacity, 38%), transparent ); } :host(:not([disabled])) .tick.active { background-color: var(--m3e-slider-tick-active-color, ${g.color.onPrimary}); } :host([disabled]) .tick.active { background-color: var(--m3e-slider-disabled-tick-active-color, ${g.color.inverseOnSurface}); } :host(:not([disabled])) .tick.inactive { background-color: var(--m3e-slider-tick-inactive-color, ${g.color.onSecondaryContainer}); } :host([disabled]) .tick.inactive { background-color: var(--m3e-slider-disabled-tick-inactive-color, ${g.color.onSurface}); } :host(:not([discrete])) .tick.active { display: none; } :host(:hover[labelled]) .base, :host(:focus-within[labelled]) .base { --_slider-label-visibility: visible; --_slider-label-opacity: 1; --_slider-label-transform: scale(1); } @media (forced-colors: active) { :host(:not([disabled])) .track-inactive { background-color: unset; } :host(:not([disabled])) .base.range .track-inactive.start, :host(:not([disabled])) .track-inactive.end { border: 1px solid CanvasText; box-sizing: border-box; } :host(:not([disabled])) .tick.inactive { background-color: CanvasText; } :host(:not([disabled])) .tick.active { background-color: Canvas; } :host(:not([disabled])) .track-active { background-color: CanvasText; } :host([disabled]) .base.range .track-inactive.start, :host([disabled]) .track-inactive.end { border: 1px solid GrayText; box-sizing: border-box; } :host([disabled]) .track-active { background-color: GrayText; } :host([disabled]) .tick.inactive { background-color: GrayText; } :host([disabled]) .tick.active { background-color: Canvas; } }`,t([h(".base")],te.prototype,"_base",void 0),t([c()],te.prototype,"_ticks",void 0),t([n({reflect:!0})],te.prototype,"size",void 0),t([n({type:Boolean,reflect:!0})],te.prototype,"disabled",void 0),t([n({type:Boolean,reflect:!0})],te.prototype,"discrete",void 0),t([n({type:Number})],te.prototype,"min",void 0),t([n({type:Number})],te.prototype,"max",void 0),t([n({type:Number})],te.prototype,"step",void 0),t([n({type:Boolean})],te.prototype,"labelled",void 0),t([n({attribute:!1})],te.prototype,"displayWith",void 0),te=t([x("m3e-slider")],te);export{te as M3eSliderElement,P as M3eSliderThumbElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as s,unsafeCSS as r,css as l}from"lit";import{query as n,property as h,state as c}from"lit/decorators.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{Dirty as d,Touched as m,FormAssociated as p,Focusable as u,Disabled as v,AttachInternals as b,Role as f,formValue as k,DesignToken as g,customElement as y,ResizeController as x,safeStyleMap as $,hasCustomState as _,deleteCustomState as w,prefersReducedMotion as T,addCustomState as z}from"@m3e/web/core";import{M3eDirectionality as E}from"@m3e/web/core/bidi";var M,S;let P=class extends(d(m(p(u(v(b(f(a,"slider")))))))){constructor(){super(...arguments),M.add(this),this.value=null}get[(M=new WeakSet,k)](){return this.value?.toString()??null}focus(e){this._focusRing&&(this._focusRing.disabled=!0),super.focus(e),this._focusRing&&(this._focusRing.disabled=this.disabled)}firstUpdated(e){super.firstUpdated(e),this._focusRing?.attach(this)}update(e){super.update(e),e.has("value")&&this.dispatchEvent(new Event("value-change",{bubbles:!0}))}render(){return s`<div class="label" aria-hidden="true">${e(this,M,"a",S)}</div><div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="handle"></div></div></div>`}};var C,W,L,D,R,A,j,U,H,N,B,G,I,V,O,X,q,F,J,K,Q,Y,Z,ee;S=function(){return this.closest("m3e-slider")?.displayWith?.(this.value)??this.value?.toString()??""},P.styles=l`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${g.shape.corner.full}); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${r(`opacity ${g.motion.duration.short3} ${g.motion.easing.standard}, \n          transform ${g.motion.duration.short3} ${g.motion.easing.standard},\n          visibility ${g.motion.duration.short3} ${g.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${g.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${g.color.inverseSurface}); color: var(--m3e-slider-label-color, ${g.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${g.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${g.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${g.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${g.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${r(`width ${g.motion.duration.short2} ${g.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${g.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${g.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`,t([n(".focus-ring")],P.prototype,"_focusRing",void 0),t([h({type:Number,reflect:!0})],P.prototype,"value",void 0),P=t([y("m3e-slider-thumb")],P);let te=class extends(b(a)){constructor(){super(),C.add(this),W.set(this,void 0),this._ticks=new Array,L.set(this,new Set),D.set(this,new Array),R.set(this,void 0),A.set(this,0),j.set(this,0),U.set(this,0),this.size="extra-small",this.disabled=!1,this.discrete=!1,this.min=0,this.max=100,this.step=1,this.labelled=!1,this.displayWith=null,new x(this,{callback:()=>e(this,C,"m",O).call(this,!0)})}get thumbs(){return e(this,D,"f")}get isRange(){return e(this,D,"f").length>1}get thumb(){return e(this,D,"f")[0]??null}get lowerThumb(){return this.thumb}get upperThumb(){return e(this,D,"f")[1]??null}connectedCallback(){super.connectedCallback(),i(this,W,E.observe(()=>{e(this,C,"m",O).call(this,!0),this.requestUpdate()}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,L,"f").clear(),e(this,W,"f")?.call(this)}updated(t){super.updated(t),t.has("disabled")&&e(this,D,"f").forEach(e=>e.disabled=this.disabled)}render(){return s`<div class="base" tabindex="${o(this.disabled?void 0:"-1")}" @pointerdown="${e(this,C,"m",q)}" @pointermove="${e(this,C,"m",F)}" @pointerup="${e(this,C,"m",J)}" @keydown="${e(this,C,"m",K)}" @keyup="${e(this,C,"m",Q)}" @value-change="${e(this,C,"m",Y)}"><div class="track" aria-hidden="true"><div class="track-inactive start"></div><div class="track-active"></div><div class="track-inactive end"></div></div><div class="ticks" aria-hidden="true">${this._ticks.map(t=>e(this,C,"m",H).call(this,t))}</div><slot @slotchange="${e(this,C,"m",N)}"></slot></div>`}};W=new WeakMap,L=new WeakMap,D=new WeakMap,R=new WeakMap,A=new WeakMap,j=new WeakMap,U=new WeakMap,C=new WeakSet,H=function(t){return s`<div class="tick ${t.active?"active":"inactive"}" style="${$({transform:`translate(${"rtl"===E.current?-e(this,C,"m",G).call(this,t.value):e(this,C,"m",G).call(this,t.value)}px, 0)`})}"></div>`},N=function(t){i(this,D,t.target.assignedElements({flatten:!0}).filter(e=>e instanceof P),"f"),e(this,D,"f").length>2&&(e(this,D,"f").length=2),this.isRange?this._base?.style.setProperty("--_slider-active-track-middle-shape","0"):this._base?.style.removeProperty("--_slider-active-track-middle-shape"),e(this,C,"m",B).call(this)},B=function(){e(this,D,"f").forEach((t,i)=>{this.disabled&&(t.disabled=!0),t.ariaValueMin=`${e(this,D,"f")[i-1]?.value??this.min}`,t.ariaValueMax=`${e(this,D,"f")[i+1]?.value??this.max}`,t.ariaValueNow=`${t.value??e(this,D,"f")[i-1]?.value??this.min}`})},G=function(t){return(e(this,A,"f")-e(this,j,"f"))*((t-this.min)/(this.max-this.min))},I=function(t){const i="rtl"===E.current?e(this,U,"f")+e(this,A,"f")-t.clientX:t.clientX-e(this,U,"f"),a=0===this.step?1:this.step,s=Math.floor((this.max-this.min)/a),r=i/e(this,A,"f"),l=Math.round(r*s)/s*(this.max-this.min)+this.min;return Math.round(l/a)*a},V=function(t=!1){this.lowerThumb&&(i(this,A,!t&&e(this,A,"f")>0?e(this,A,"f"):this.clientWidth,"f"),i(this,j,!t&&e(this,j,"f")>0?e(this,j,"f"):this.lowerThumb.clientWidth,"f"),i(this,U,!t&&e(this,U,"f")>0?e(this,U,"f"):this.getBoundingClientRect().left,"f"))},O=function(t=!1){if(e(this,C,"m",V).call(this,t),!this.lowerThumb)return;const i=this.lowerThumb.value??this.min,a=e(this,C,"m",G).call(this,i);if(this.lowerThumb.style.transform=`translate(${"rtl"===E.current?-a:a}px, 0)`,this.upperThumb){const t=this.upperThumb.value??i,s=e(this,C,"m",G).call(this,t);this.upperThumb.style.transform=`translate(${"rtl"===E.current?-s:s}px, 0)`,this._base?.classList.toggle("range",!0),this._base?.style.setProperty("--_slider-inactive-track-before-size",`${a}px`),this._base?.style.setProperty("--_slider-active-track-offset",`${a+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-active-track-size",s-a-e(this,j,"f")+"px"),this._base?.style.setProperty("--_slider-inactive-track-after-offset",`${s+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-inactive-track-after-size",e(this,A,"f")-e(this,j,"f")-s+"px"),e(this,C,"m",X).call(this,e=>e>i&&e<t)}else this._base?.classList.toggle("range",!1),this._base?.style.setProperty("--_slider-active-track-size",`${a}px`),this._base?.style.setProperty("--_slider-inactive-track-after-offset",`${a+e(this,j,"f")}px`),this._base?.style.setProperty("--_slider-inactive-track-after-size",e(this,A,"f")-a-e(this,j,"f")+"px"),e(this,C,"m",X).call(this,e=>e<i)},X=function(e){if(this._ticks=[],this.discrete&&this.step>1)for(let t=this.min;t<=this.max;t+=this.step)this._ticks.push({value:t,active:e(t)});else this._ticks.push({value:this.min,active:e(this.min)}),this.min<0&&this.max>0&&this._ticks.push({value:0,active:e(0)}),this._ticks.push({value:this.max,active:e(this.max)})},q=function(t){if("mouse"===t.pointerType&&t.button>1)return;if(!this.lowerThumb||this.disabled)return;if(t.target instanceof HTMLElement&&t.target.setPointerCapture(t.pointerId),e(this,L,"f").clear(),i(this,R,t.composedPath().find(e=>e instanceof P),"f"),e(this,R,"f"))return;const a=e(this,C,"m",I).call(this,t);if(this.upperThumb){const t=this.lowerThumb.value??this.min,s=this.upperThumb.value??t;if(a<t)this.lowerThumb.disabled||(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f"));else if(a>s)this.upperThumb.disabled||(e(this,C,"m",Z).call(this,this.upperThumb,a,!0),i(this,R,this.upperThumb,"f"));else{a<(t+s)/2&&!this.lowerThumb.disabled?(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f")):this.upperThumb.disabled||(e(this,C,"m",Z).call(this,this.upperThumb,a,!0),i(this,R,this.upperThumb,"f"))}}else this.lowerThumb.disabled||(e(this,C,"m",Z).call(this,this.lowerThumb,a,!0),i(this,R,this.lowerThumb,"f"))},F=function(t){if(!(t.target instanceof HTMLElement)||!t.target.hasPointerCapture(t.pointerId)||!e(this,R,"f")||e(this,R,"f").disabled)return;const i=e(this,C,"m",I).call(this,t);let a=this.min,s=this.max;e(this,R,"f")===this.upperThumb?a=Math.max(a,this.lowerThumb?.value??0):this.upperThumb&&(s=Math.min(s,this.upperThumb.value??this.max)),_(this,"--animating")&&(w(this,"--animating"),e(this,R,"f").style.transition=""),e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(s,Math.max(a,i)))},J=function(t){"mouse"===t.pointerType&&t.button>1||this.lowerThumb&&!this.disabled&&(t.target instanceof HTMLElement&&t.target.releasePointerCapture(t.pointerId),e(this,R,"f")&&!e(this,R,"f").disabled&&(e(this,C,"m",ee).call(this,e(this,R,"f")),e(this,R,"f").focus()))},K=function(t){if(i(this,R,t.composedPath().find(e=>e instanceof P),"f"),!e(this,R,"f"))return;const a=e(this,R,"f").value??0;let s=this.min,r=this.max;switch(e(this,R,"f")===this.upperThumb?s=Math.max(s,this.lowerThumb?.value??0):this.upperThumb&&(r=Math.max(r,this.upperThumb.value??this.max)),t.key){case"Home":e(this,C,"m",Z).call(this,e(this,R,"f"),s),t.preventDefault();break;case"End":e(this,C,"m",Z).call(this,e(this,R,"f"),r),t.preventDefault();break;case"PageUp":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+(this.step>1?this.step:10))):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-(this.step>1?this.step:10))),t.preventDefault();break;case"PageDown":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-(this.step>1?this.step:10))):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+(this.step>1?this.step:10))),t.preventDefault();break;case"Down":case"ArrowDown":case"Left":case"ArrowLeft":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-this.step)):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+this.step)),t.preventDefault();break;case"Up":case"ArrowUp":case"Right":case"ArrowRight":"ltr"===E.current?e(this,C,"m",Z).call(this,e(this,R,"f"),Math.min(r,a+this.step)):e(this,C,"m",Z).call(this,e(this,R,"f"),Math.max(s,a-this.step)),t.preventDefault();break;case" ":t.preventDefault()}},Q=function(t){const i=t.composedPath().find(e=>e instanceof P);i&&e(this,C,"m",ee).call(this,i)},Y=function(t){t.stopPropagation(),e(this,C,"m",B).call(this),e(this,C,"m",O).call(this)},Z=function(t,i,a=!1){t.value!==i&&t.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(a&&!T()&&(z(this,"--animating"),t.addEventListener("transitionend",()=>{t.style.transition="",w(this,"--animating")},{once:!0}),t.style.transition=`transform ${g.motion.spring.fastEffects}`),e(this,L,"f").add(t),t.value=i,t.markAsDirty(),t.markAsTouched(),t.dispatchEvent(new Event("input",{bubbles:!0})))},ee=function(t){e(this,L,"f").has(t)&&(t.dispatchEvent(new Event("change",{bubbles:!0})),e(this,L,"f").delete(t))},te.styles=l`:host { display: inline-block; vertical-align: middle; min-inline-size: var(--m3e-slider-min-width, 12.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([disabled])) { cursor: pointer; } :host([size="extra-small"]), :host([size="small"]) { height: var(--m3e-slider-small-height, 2.75rem); } :host(:not(:dir(rtl))[size="extra-small"]) .base, :host(:not(:dir(rtl))[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${g.shape.corner.smallStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${g.shape.corner.smallStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${g.shape.corner.smallEnd} ); } :host(:dir(rtl)[size="extra-small"]) .base, :host(:dir(rtl)[size="small"]) .base { --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${g.shape.corner.smallEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-small-inactive-active-track-start-shape, ${g.shape.corner.smallEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-small-inactive-track-end-shape, ${g.shape.corner.smallStart} ); } :host([size="extra-small"]) .track { height: calc(var(--m3e-slider-extra-small-track-height, 1rem)); } :host([size="small"]) .track { height: calc(var(--m3e-slider-small-track-height, 1.5rem)); } :host([size="medium"]) { height: var(--m3e-slider-medium-height, 3.25rem); } :host(:not(:dir(rtl))[size="medium"]) .base { --_slider-active-track-shape: var( --m3e-slider-medium-active-track-shape, ${g.shape.corner.mediumStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${g.shape.corner.mediumStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${g.shape.corner.mediumEnd} ); } :host(:dir(rtl)[size="medium"]) .base { --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${g.shape.corner.mediumEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-medium-inactive-active-track-start-shape, ${g.shape.corner.mediumEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-medium-inactive-track-end-shape, ${g.shape.corner.mediumStart} ); } :host([size="medium"]) .track { height: var(--m3e-slider-medium-track-height, 2.5rem); } :host([size="large"]) { height: var(--m3e-slider-large-height, 4.25rem); } :host(:not(:dir(rtl))[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${g.shape.corner.largeStart}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${g.shape.corner.largeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${g.shape.corner.largeEnd} ); } :host(:dir(rtl)[size="large"]) .base { --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${g.shape.corner.largeEnd}); --_slider-inactive-track-start-shape: var( --m3e-slider-large-inactive-active-track-start-shape, ${g.shape.corner.largeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-large-inactive-track-end-shape, ${g.shape.corner.largeStart} ); } :host([size="large"]) .track { height: var(--m3e-slider-large-track-height, 3.5rem); } :host([size="extra-large"]) { height: var(--m3e-slider-extra-large-height, 6.75rem); } :host(:not(:dir(rtl))[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${g.shape.corner.extraLargeStart} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${g.shape.corner.extraLargeStart} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${g.shape.corner.extraLargeEnd} ); } :host(:dir(rtl)[size="extra-large"]) .base { --_slider-active-track-shape: var( --m3e-slider-extra-large-active-track-shape, ${g.shape.corner.extraLargeEnd} ); --_slider-inactive-track-start-shape: var( --m3e-slider-extra-large-inactive-active-track-start-shape, ${g.shape.corner.extraLargeEnd} ); --_slider-inactive-track-end-shape: var( --m3e-slider-extra-large-inactive-track-end-shape, ${g.shape.corner.extraLargeStart} ); } :host([size="extra-large"]) .track { height: var(--m3e-slider-extra-large-track-height, 6rem); } :host(:is(:state(--animating), :--animating)) .track-active, :host(:is(:state(--animating), :--animating)) .track-inactive.start, :host(:is(:state(--animating), :--animating)) .track-inactive.end { transition: ${r(`margin-inline-start ${g.motion.spring.fastEffects},\n        width ${g.motion.spring.fastEffects}`)}; } .base { contain: layout style; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: inherit; outline: none; touch-action: none; } .track { contain: layout style paint; position: relative; flex: 1 1 auto; touch-action: none; } .track-inactive, .track-active { contain: layout style paint; position: absolute; height: 100%; touch-action: none; } .track-active { margin-inline-start: var(--_slider-active-track-offset, 0px); width: var(--_slider-active-track-size, 0px); border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape)); } .track-inactive.start { width: var(--_slider-inactive-track-before-size, 0px); border-radius: var(--_slider-inactive-track-start-shape); } .track-inactive.end { margin-inline-start: var(--_slider-inactive-track-after-offset, 0px); width: var(--_slider-inactive-track-after-size, 0px); border-radius: var(--_slider-inactive-track-end-shape); } .ticks { position: absolute; width: 100%; height: var(--m3e-slider-tick-size, 0.25rem); overflow: visible; touch-action: none; } .tick { position: absolute; top: 0; touch-action: none; inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2)); width: var(--m3e-slider-tick-size, 0.25rem); height: var(--m3e-slider-tick-size, 0.25rem); border-radius: var(--m3e-slider-tick-shape, ${g.shape.corner.full}); } :host(:not([disabled])) .track-inactive { background-color: var(--m3e-slider-inactive-track-color, ${g.color.secondaryContainer}); } :host([disabled]) .track-inactive { background-color: color-mix( in srgb, var(--m3e-slider-disabled-inactive-track-color, ${g.color.onSurface}) var(--m3e-slider-disabled-inactive-track-opacity, 12%), transparent ); } :host(:not([disabled])) .track-active { background-color: var(--m3e-slider-active-track-color, ${g.color.primary}); } :host([disabled]) .track-active { background-color: color-mix( in srgb, var(--m3e-slider-disabled-active-track-color, ${g.color.onSurface}) var(--m3e-slider-disabled-active-track-opacity, 38%), transparent ); } :host(:not([disabled])) .tick.active { background-color: var(--m3e-slider-tick-active-color, ${g.color.onPrimary}); } :host([disabled]) .tick.active { background-color: var(--m3e-slider-disabled-tick-active-color, ${g.color.inverseOnSurface}); } :host(:not([disabled])) .tick.inactive { background-color: var(--m3e-slider-tick-inactive-color, ${g.color.onSecondaryContainer}); } :host([disabled]) .tick.inactive { background-color: var(--m3e-slider-disabled-tick-inactive-color, ${g.color.onSurface}); } :host(:not([discrete])) .tick.active { display: none; } :host(:hover[labelled]) .base, :host(:focus-within[labelled]) .base { --_slider-label-visibility: visible; --_slider-label-opacity: 1; --_slider-label-transform: scale(1); } @media (forced-colors: active) { :host(:not([disabled])) .track-inactive { background-color: unset; } :host(:not([disabled])) .base.range .track-inactive.start, :host(:not([disabled])) .track-inactive.end { border: 1px solid CanvasText; box-sizing: border-box; } :host(:not([disabled])) .tick.inactive { background-color: CanvasText; } :host(:not([disabled])) .tick.active { background-color: Canvas; } :host(:not([disabled])) .track-active { background-color: CanvasText; } :host([disabled]) .base.range .track-inactive.start, :host([disabled]) .track-inactive.end { border: 1px solid GrayText; box-sizing: border-box; } :host([disabled]) .track-active { background-color: GrayText; } :host([disabled]) .tick.inactive { background-color: GrayText; } :host([disabled]) .tick.active { background-color: Canvas; } }`,t([n(".base")],te.prototype,"_base",void 0),t([c()],te.prototype,"_ticks",void 0),t([h({reflect:!0})],te.prototype,"size",void 0),t([h({type:Boolean,reflect:!0})],te.prototype,"disabled",void 0),t([h({type:Boolean,reflect:!0})],te.prototype,"discrete",void 0),t([h({type:Number})],te.prototype,"min",void 0),t([h({type:Number})],te.prototype,"max",void 0),t([h({type:Number})],te.prototype,"step",void 0),t([h({type:Boolean})],te.prototype,"labelled",void 0),t([h({attribute:!1})],te.prototype,"displayWith",void 0),te=t([y("m3e-slider")],te);export{te as M3eSliderElement,P as M3eSliderThumbElement};
 //# sourceMappingURL=slider.min.js.map

package/dist/slider.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.min.js","sources":["../../src/slider/SliderThumbElement.ts","../../src/slider/SliderElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thumb used to select a value in a slider.\r\n *\r\n * @description\r\n * The `m3e-slider-thumb` component is used within a `m3e-slider` to represent and select a specific value.\r\n * This component supports continuous and discrete input, form association, and accessibility semantics.\r\n * It emits `input` and `change` events to reflect value updates.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider-thumb\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - The value of the thumb.\r\n *\r\n * @fires beforeinput - Dispatched before the value changes.\r\n * @fires input - Dispatched when the value changes.\r\n * @fires change - Dispatched when the value changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.\r\n * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.\r\n * @cssprop --m3e-slider-thumb-color - Active color of the slider thumb when enabled.\r\n * @cssprop --m3e-slider-thumb-pressed-width - Width of the thumb when pressed.\r\n * @cssprop --m3e-slider-thumb-disabled-color - Color of the thumb when disabled.\r\n * @cssprop --m3e-slider-thumb-disabled-opacity - Opacity of the thumb when disabled.\r\n * @cssprop --m3e-slider-label-width - Width of the floating label above the thumb.\r\n * @cssprop --m3e-slider-label-container-color - Background color of the label container.\r\n * @cssprop --m3e-slider-label-color - Text color of the label.\r\n * @cssprop --m3e-slider-label-font-size - Font size of the label text.\r\n * @cssprop --m3e-slider-label-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-slider-label-line-height - Line height of the label text.\r\n * @cssprop --m3e-slider-label-tracking - Letter spacing of the label text.\r\n */\r\n@customElement(\"m3e-slider-thumb\")\r\nexport class M3eSliderThumbElement extends Dirty(\r\n  Touched(FormAssociated(Focusable(Disabled(AttachInternals(Role(LitElement, \"slider\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      outline: none;\r\n      top: 0;\r\n      bottom: 0;\r\n      border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full});\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      height: 100%;\r\n      border-radius: inherit;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n      touch-action: none;\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2));\r\n    }\r\n    .focus-ring {\r\n      top: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      left: var(--m3e-focus-ring-thickness, 3px);\r\n      right: var(--m3e-focus-ring-thickness, 3px);\r\n    }\r\n    .label {\r\n      user-select: none;\r\n      position: absolute;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      visibility: var(--_slider-label-visibility, hidden);\r\n      opacity: var(--_slider-label-opacity, 0);\r\n      transform: var(--_slider-label-transform, scale(0));\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n          transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n          visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n      width: var(--m3e-slider-label-width, 3rem);\r\n      height: var(--_m3e-slider-label-height, 2.75rem);\r\n      top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem));\r\n      inset-inline-start: calc(0px - 100%);\r\n      border-radius: var(--m3e-slider-label-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-slider-label-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-slider-label-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-slider-label-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(--m3e-slider-label-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight});\r\n      line-height: var(--m3e-slider-label-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight});\r\n      letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n    }\r\n    @starting-style {\r\n      .label {\r\n        opacity: 0;\r\n        transform: scale(0);\r\n      }\r\n    }\r\n    .handle {\r\n      height: 100%;\r\n      width: var(--m3e-slider-thumb-width, 0.25rem);\r\n      border-radius: inherit;\r\n      transition: ${unsafeCSS(`width ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:active:not([aria-disabled=\"true\"])) .handle {\r\n      width: var(--m3e-slider-thumb-pressed-width, 2px);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .handle {\r\n      background-color: var(--m3e-slider-thumb-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .handle {\r\n      opacity: var(--m3e-slider-thumb-disabled-opacity, 38%);\r\n      background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken.color.onSurface});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .label {\r\n        forced-color-adjust: none;\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"])) .handle {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .handle {\r\n        opacity: unset;\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\")\r\n  private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  /**\r\n   * The value of the thumb.\r\n   * @default null\r\n   */\r\n  @property({ type: Number, reflect: true }) value: number | null = null;\r\n\r\n  /** @inheritdoc */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.value?.toString() ?? null;\r\n  }\r\n\r\n  /** @internal */\r\n  get #labelText(): string {\r\n    return this.closest(\"m3e-slider\")?.displayWith?.(this.value) ?? this.value?.toString() ?? \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = true;\r\n    }\r\n\r\n    super.focus(options);\r\n\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._focusRing?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"value\")) {\r\n      this.dispatchEvent(new Event(\"value-change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\" aria-hidden=\"true\">${this.#labelText}</div>\r\n      <div class=\"base\">\r\n        <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"handle\"></div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider-thumb\": M3eSliderThumbElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  safeStyleMap,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eSliderThumbElement } from \"./SliderThumbElement\";\r\nimport { SliderSize } from \"./SliderSize\";\r\n\r\n/**\r\n * Allows for the selection of numeric values from a range.\r\n *\r\n * @description\r\n * The `m3e-slider` component enables users to select a numeric value from a continuous or discrete range.\r\n * Designed according to Material 3 principles, it supports labeled value indicators, tick marks, and\r\n * snapping behavior.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider\r\n *\r\n * @slot - Renders the thumbs of the slider.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr discrete - Whether to show tick marks.\r\n * @attr labelled - Whether to show value labels when activated.\r\n * @attr max - The maximum allowable value.\r\n * @attr min - The minimum allowable value.\r\n * @attr step - The value at which the thumb will snap.\r\n * @attr size - The size of the slider.\r\n *\r\n * @fires beforeinput - Dispatched before the value of a thumb changes.\r\n * @fires input - Dispatched when the value of a thumb changes.\r\n * @fires change - Dispatched when the value of a thumb changes.\r\n *\r\n * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.\r\n * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.\r\n * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.\r\n * @cssprop --m3e-slider-large-height - Height of the slider when size is large.\r\n * @cssprop --m3e-slider-extra-large-height - Height of the slider when size is extra-large.\r\n * @cssprop --m3e-slider-small-active-track-shape - Corner shape of the active track for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-active-track-start-shape - Corner shape of the inactive track start for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-track-end-shape - Corner shape of the inactive track end for small sliders.\r\n * @cssprop --m3e-slider-medium-active-track-shape - Corner shape of the active track for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-active-track-start-shape - Corner shape of the inactive track start for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-track-end-shape - Corner shape of the inactive track end for medium sliders.\r\n * @cssprop --m3e-slider-large-active-track-shape - Corner shape of the active track for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-active-track-start-shape - Corner shape of the inactive track start for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-track-end-shape - Corner shape of the inactive track end for large sliders.\r\n * @cssprop --m3e-slider-extra-large-active-track-shape - Corner shape of the active track for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-active-track-start-shape - Corner shape of the inactive track start for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-track-end-shape - Corner shape of the inactive track end for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-small-track-height - Height of the track for extra-small sliders.\r\n * @cssprop --m3e-slider-small-track-height - Height of the track for small sliders.\r\n * @cssprop --m3e-slider-medium-track-height - Height of the track for medium sliders.\r\n * @cssprop --m3e-slider-large-track-height - Height of the track for large sliders.\r\n * @cssprop --m3e-slider-extra-large-track-height - Height of the track for extra-large sliders.\r\n * @cssprop --m3e-slider-tick-size - Size of each tick mark.\r\n * @cssprop --m3e-slider-tick-shape - Corner shape of each tick mark.\r\n * @cssprop --m3e-slider-inactive-track-color - Background color of the inactive track when enabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-color - Base color of the inactive track when disabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-opacity - Opacity of the inactive track when disabled.\r\n * @cssprop --m3e-slider-active-track-color - Background color of the active track when enabled.\r\n * @cssprop --m3e-slider-disabled-active-track-color - Base color of the active track when disabled.\r\n * @cssprop --m3e-slider-disabled-active-track-opacity - Opacity of the active track when disabled.\r\n * @cssprop --m3e-slider-tick-active-color - Color of active ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-active-color - Color of active ticks when disabled.\r\n * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.\r\n */\r\n@customElement(\"m3e-slider\")\r\nexport class M3eSliderElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      min-inline-size: var(--m3e-slider-min-width, 12.5rem);\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([disabled])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([size=\"extra-small\"]),\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-slider-small-height, 2.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-small\"]) .base,\r\n    :host(:not(:dir(rtl))[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-small\"]) .base,\r\n    :host(:dir(rtl)[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .track {\r\n      height: calc(var(--m3e-slider-extra-small-track-height, 1rem));\r\n    }\r\n    :host([size=\"small\"]) .track {\r\n      height: calc(var(--m3e-slider-small-track-height, 1.5rem));\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-slider-medium-height, 3.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-medium-active-track-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n    }\r\n    :host([size=\"medium\"]) .track {\r\n      height: var(--m3e-slider-medium-track-height, 2.5rem);\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-slider-large-height, 4.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n    }\r\n    :host([size=\"large\"]) .track {\r\n      height: var(--m3e-slider-large-track-height, 3.5rem);\r\n    }\r\n    :host([size=\"extra-large\"]) {\r\n      height: var(--m3e-slider-extra-large-height, 6.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-large\"]) .track {\r\n      height: var(--m3e-slider-extra-large-track-height, 6rem);\r\n    }\r\n    :host(:is(:state(--animating), :--animating)) .track-active,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.start,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.end {\r\n      transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects},\r\n        width ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      outline: none;\r\n      touch-action: none;\r\n    }\r\n    .track {\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      touch-action: none;\r\n    }\r\n    .track-inactive,\r\n    .track-active {\r\n      position: absolute;\r\n      height: 100%;\r\n      touch-action: none;\r\n    }\r\n    .track-active {\r\n      margin-inline-start: var(--_slider-active-track-offset, 0px);\r\n      width: var(--_slider-active-track-size, 0px);\r\n      border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape));\r\n    }\r\n    .track-inactive.start {\r\n      width: var(--_slider-inactive-track-before-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-start-shape);\r\n    }\r\n    .track-inactive.end {\r\n      margin-inline-start: var(--_slider-inactive-track-after-offset, 0px);\r\n      width: var(--_slider-inactive-track-after-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-end-shape);\r\n    }\r\n    .ticks {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      overflow: visible;\r\n      touch-action: none;\r\n    }\r\n    .tick {\r\n      position: absolute;\r\n      top: 0;\r\n      touch-action: none;\r\n      inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2));\r\n      width: var(--m3e-slider-tick-size, 0.25rem);\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not([disabled])) .track-inactive {\r\n      background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([disabled]) .track-inactive {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-inactive-track-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .track-active {\r\n      background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([disabled]) .track-active {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-active-track-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .tick.active {\r\n      background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host([disabled]) .tick.active {\r\n      background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([disabled])) .tick.inactive {\r\n      background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([disabled]) .tick.inactive {\r\n      background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([discrete])) .tick.active {\r\n      display: none;\r\n    }\r\n    :host(:hover[labelled]) .base,\r\n    :host(:focus-within[labelled]) .base {\r\n      --_slider-label-visibility: visible;\r\n      --_slider-label-opacity: 1;\r\n      --_slider-label-transform: scale(1);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([disabled])) .track-inactive {\r\n        background-color: unset;\r\n      }\r\n      :host(:not([disabled])) .base.range .track-inactive.start,\r\n      :host(:not([disabled])) .track-inactive.end {\r\n        border: 1px solid CanvasText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host(:not([disabled])) .tick.inactive {\r\n        background-color: CanvasText;\r\n      }\r\n      :host(:not([disabled])) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n      :host(:not([disabled])) .track-active {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([disabled]) .base.range .track-inactive.start,\r\n      :host([disabled]) .track-inactive.end {\r\n        border: 1px solid GrayText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host([disabled]) .track-active {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.inactive {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */\r\n  @state() private _ticks = new Array<{ value: number; active: boolean }>();\r\n\r\n  /** @private */ readonly #changedThumbs = new Set<M3eSliderThumbElement>();\r\n  /** @private */ #thumbs = new Array<M3eSliderThumbElement>();\r\n  /** @private */ #activeThumb?: M3eSliderThumbElement;\r\n  /** @private */ #cachedWidth = 0;\r\n  /** @private */ #cachedThumbWidth = 0;\r\n  /** @private */ #cachedLeft = 0;\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, { callback: () => this.#updateDimensions(true) });\r\n  }\r\n\r\n  /**\r\n   * The size of the slider.\r\n   * @default \"extra-small\"\r\n   */\r\n  @property({ reflect: true }) size: SliderSize = \"extra-small\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether to show tick marks.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) discrete = false;\r\n\r\n  /**\r\n   * The minimum allowable value.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) min = 0;\r\n\r\n  /**\r\n   * The maximum allowable value.\r\n   * @default 100\r\n   */\r\n  @property({ type: Number }) max = 100;\r\n\r\n  /**\r\n   * The value at which the thumb will snap.\r\n   * @default 1\r\n   */\r\n  @property({ type: Number }) step = 1;\r\n\r\n  /**\r\n   * Whether to show value labels when activated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) labelled = false;\r\n\r\n  /** The function used to format display values. */\r\n  @property({ attribute: false }) displayWith: ((value: number | null) => string) | null = null;\r\n\r\n  /** The thumbs used to select values. */\r\n  get thumbs(): readonly M3eSliderThumbElement[] {\r\n    return this.#thumbs;\r\n  }\r\n\r\n  /** Whether the slider is a range slider. */\r\n  get isRange(): boolean {\r\n    return this.#thumbs.length > 1;\r\n  }\r\n\r\n  /** The thumb used to select a value. */\r\n  get thumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[0] ?? null;\r\n  }\r\n\r\n  /** The thumb used to select the lower value of a range slider. */\r\n  get lowerThumb(): M3eSliderThumbElement | null {\r\n    return this.thumb;\r\n  }\r\n\r\n  /** The thumb used to select the upper value of a range slider. */\r\n  get upperThumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[1] ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.#updateDimensions(true);\r\n      this.requestUpdate();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changedThumbs.clear();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"disabled\")) {\r\n      this.#thumbs.forEach((x) => (x.disabled = this.disabled));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div\r\n      class=\"base\"\r\n      tabindex=\"${ifDefined(!this.disabled ? \"-1\" : undefined)}\"\r\n      @pointerdown=\"${this.#handlePointerDown}\"\r\n      @pointermove=\"${this.#handlePointerMove}\"\r\n      @pointerup=\"${this.#handlePointerUp}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @keyup=\"${this.#handleKeyUp}\"\r\n      @value-change=\"${this.#handleThumbChange}\"\r\n    >\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"track-inactive start\"></div>\r\n        <div class=\"track-active\"></div>\r\n        <div class=\"track-inactive end\"></div>\r\n      </div>\r\n      <div class=\"ticks\" aria-hidden=\"true\">${this._ticks.map((x) => this.#renderTick(x))}</div>\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderTick(tick: { value: number; active: boolean }) {\r\n    return html`<div\r\n      class=\"tick ${tick.active ? \"active\" : \"inactive\"}\"\r\n      style=\"${safeStyleMap({\r\n        transform: `translate(${M3eDirectionality.current === \"rtl\" ? -this.#pointFromValue(tick.value) : this.#pointFromValue(tick.value)}px, 0)`,\r\n      })}\"\r\n    ></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#thumbs = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#thumbs.length > 2) {\r\n      this.#thumbs.length = 2;\r\n    }\r\n    if (this.isRange) {\r\n      this._base?.style.setProperty(\"--_slider-active-track-middle-shape\", `0`);\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_slider-active-track-middle-shape\");\r\n    }\r\n\r\n    this.#updateThumbs();\r\n  }\r\n\r\n  /** @private */\r\n  #updateThumbs(): void {\r\n    this.#thumbs.forEach((thumb, i) => {\r\n      if (this.disabled) {\r\n        thumb.disabled = true;\r\n      }\r\n      thumb.ariaValueMin = `${this.#thumbs[i - 1]?.value ?? this.min}`;\r\n      thumb.ariaValueMax = `${this.#thumbs[i + 1]?.value ?? this.max}`;\r\n      thumb.ariaValueNow = `${thumb.value ?? this.#thumbs[i - 1]?.value ?? this.min}`;\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #pointFromValue(value: number): number {\r\n    return (this.#cachedWidth - this.#cachedThumbWidth) * ((value - this.min) / (this.max - this.min));\r\n  }\r\n\r\n  /** @private */\r\n  #valueFromPoint(e: PointerEvent): number {\r\n    const pos =\r\n      M3eDirectionality.current === \"rtl\"\r\n        ? this.#cachedLeft + this.#cachedWidth - e.clientX\r\n        : e.clientX - this.#cachedLeft;\r\n    const step = this.step === 0 ? 1 : this.step;\r\n    const numSteps = Math.floor((this.max - this.min) / step);\r\n    const percentage = pos / this.#cachedWidth;\r\n    const fixedPercentage = Math.round(percentage * numSteps) / numSteps;\r\n    const impreciseValue = fixedPercentage * (this.max - this.min) + this.min;\r\n    return Math.round(impreciseValue / step) * step;\r\n  }\r\n\r\n  /** @private */\r\n  #updateCachedDimensions(force = false): void {\r\n    if (!this.lowerThumb) return;\r\n    this.#cachedWidth = !force && this.#cachedWidth > 0 ? this.#cachedWidth : this.clientWidth;\r\n    this.#cachedThumbWidth =\r\n      !force && this.#cachedThumbWidth > 0 ? this.#cachedThumbWidth : this.lowerThumb.clientWidth;\r\n    this.#cachedLeft = !force && this.#cachedLeft > 0 ? this.#cachedLeft : this.getBoundingClientRect().left;\r\n  }\r\n\r\n  /** @private */\r\n  #updateDimensions(force = false): void {\r\n    this.#updateCachedDimensions(force);\r\n    if (!this.lowerThumb) return;\r\n\r\n    const lowerValue = this.lowerThumb.value ?? this.min;\r\n    const lowerPos = this.#pointFromValue(lowerValue);\r\n    this.lowerThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -lowerPos : lowerPos}px, 0)`;\r\n\r\n    if (!this.upperThumb) {\r\n      this._base?.classList.toggle(\"range\", false);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - lowerPos - this.#cachedThumbWidth}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i < lowerValue);\r\n    } else {\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n      const upperPos = this.#pointFromValue(upperValue);\r\n      this.upperThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -upperPos : upperPos}px, 0)`;\r\n\r\n      this._base?.classList.toggle(\"range\", true);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-before-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${upperPos - lowerPos - this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${upperPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - this.#cachedThumbWidth - upperPos}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i > lowerValue && i < upperValue);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTicks(active: (value: number) => boolean): void {\r\n    this._ticks = [];\r\n    if (this.discrete && this.step > 1) {\r\n      for (let i = this.min; i <= this.max; i += this.step) {\r\n        this._ticks.push({ value: i, active: active(i) });\r\n      }\r\n    } else {\r\n      this._ticks.push({ value: this.min, active: active(this.min) });\r\n      if (this.min < 0 && this.max > 0) {\r\n        this._ticks.push({ value: 0, active: active(0) });\r\n      }\r\n      this._ticks.push({ value: this.max, active: active(this.max) });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.setPointerCapture(e.pointerId);\r\n    }\r\n\r\n    this.#changedThumbs.clear();\r\n\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#activeThumb) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n\r\n    if (!this.upperThumb) {\r\n      if (!this.lowerThumb.disabled) {\r\n        this.#changeThumb(this.lowerThumb, value, true);\r\n        this.#activeThumb = this.lowerThumb;\r\n      }\r\n    } else {\r\n      const lowerValue = this.lowerThumb.value ?? this.min;\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n\r\n      if (value < lowerValue) {\r\n        if (!this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        }\r\n      } else if (value > upperValue) {\r\n        if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      } else {\r\n        const mid = (lowerValue + upperValue) / 2;\r\n        if (value < mid && !this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        } else if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerMove(e: PointerEvent): void {\r\n    if (\r\n      !(e.target instanceof HTMLElement) ||\r\n      !e.target.hasPointerCapture(e.pointerId) ||\r\n      !this.#activeThumb ||\r\n      this.#activeThumb.disabled\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.min(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    if (hasCustomState(this, \"--animating\")) {\r\n      deleteCustomState(this, \"--animating\");\r\n      this.#activeThumb.style.transition = \"\";\r\n    }\r\n\r\n    this.#changeThumb(this.#activeThumb, Math.min(max, Math.max(min, value)));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerUp(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.releasePointerCapture(e.pointerId);\r\n    }\r\n\r\n    if (this.#activeThumb && !this.#activeThumb.disabled) {\r\n      this.#commitThumb(this.#activeThumb);\r\n      this.#activeThumb.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (!this.#activeThumb) return;\r\n\r\n    const value = this.#activeThumb.value ?? 0;\r\n\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.max(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"Home\":\r\n        this.#changeThumb(this.#activeThumb, min);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"End\":\r\n        this.#changeThumb(this.#activeThumb, max);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageUp\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageDown\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        }\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n\r\n        break;\r\n\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \" \":\r\n        e.preventDefault();\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    const activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n    if (activeThumb) {\r\n      this.#commitThumb(activeThumb);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleThumbChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.#updateThumbs();\r\n    this.#updateDimensions();\r\n  }\r\n\r\n  /** @private */\r\n  #changeThumb(thumb: M3eSliderThumbElement, value: number, animate = false): void {\r\n    if (thumb.value === value) return;\r\n\r\n    if (thumb.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      if (animate && !prefersReducedMotion()) {\r\n        addCustomState(this, \"--animating\");\r\n        thumb.addEventListener(\r\n          \"transitionend\",\r\n          () => {\r\n            thumb.style.transition = \"\";\r\n            deleteCustomState(this, \"--animating\");\r\n          },\r\n          { once: true },\r\n        );\r\n        thumb.style.transition = `transform ${DesignToken.motion.spring.fastEffects}`;\r\n      }\r\n      this.#changedThumbs.add(thumb);\r\n      thumb.value = value;\r\n      thumb.markAsDirty();\r\n      thumb.markAsTouched();\r\n      thumb.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #commitThumb(thumb: M3eSliderThumbElement): void {\r\n    if (this.#changedThumbs.has(thumb)) {\r\n      thumb.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      this.#changedThumbs.delete(thumb);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider\": M3eSliderElement;\r\n  }\r\n}\r\n"],"names":["M3eSliderThumbElement","Dirty","Touched","FormAssociated","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","this","value","_M3eSliderThumbElement_instances","WeakSet","formValue","toString","focus","options","_focusRing","disabled","super","firstUpdated","_changedProperties","attach","update","changedProperties","has","dispatchEvent","Event","bubbles","render","html","__classPrivateFieldGet","_M3eSliderThumbElement_labelText_get","closest","displayWith","styles","css","DesignToken","shape","corner","full","unsafeCSS","motion","duration","short3","easing","standard","color","inverseSurface","inverseOnSurface","typescale","label","medium","fontSize","fontWeight","lineHeight","tracking","short2","primary","onSurface","__decorate","query","prototype","property","type","Number","reflect","customElement","M3eSliderElement","_M3eSliderElement_directionalitySubscription","set","_ticks","Array","_M3eSliderElement_changedThumbs","Set","_M3eSliderElement_thumbs","_M3eSliderElement_activeThumb","_M3eSliderElement_cachedWidth","_M3eSliderElement_cachedThumbWidth","_M3eSliderElement_cachedLeft","size","discrete","min","max","step","labelled","ResizeController","callback","_M3eSliderElement_instances","_M3eSliderElement_updateDimensions","thumbs","isRange","length","thumb","lowerThumb","upperThumb","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","call","requestUpdate","disconnectedCallback","clear","updated","forEach","x","ifDefined","undefined","_M3eSliderElement_handlePointerDown","_M3eSliderElement_handlePointerMove","_M3eSliderElement_handlePointerUp","_M3eSliderElement_handleKeyDown","_M3eSliderElement_handleKeyUp","_M3eSliderElement_handleThumbChange","map","_M3eSliderElement_renderTick","_M3eSliderElement_handleSlotChange","tick","active","safeStyleMap","transform","current","_M3eSliderElement_pointFromValue","e","target","assignedElements","flatten","filter","_base","style","setProperty","removeProperty","_M3eSliderElement_updateThumbs","i","ariaValueMin","ariaValueMax","ariaValueNow","pos","clientX","numSteps","Math","floor","percentage","impreciseValue","round","_M3eSliderElement_updateCachedDimensions","force","clientWidth","getBoundingClientRect","left","lowerValue","lowerPos","upperValue","upperPos","classList","toggle","_M3eSliderElement_updateTicks","push","pointerType","button","HTMLElement","setPointerCapture","pointerId","composedPath","find","_M3eSliderElement_valueFromPoint","_M3eSliderElement_changeThumb","hasPointerCapture","hasCustomState","deleteCustomState","transition","releasePointerCapture","key","preventDefault","activeThumb","_M3eSliderElement_commitThumb","stopPropagation","animate","cancelable","prefersReducedMotion","addCustomState","addEventListener","once","spring","fastEffects","add","markAsDirty","markAsTouched","delete","smallStart","smallEnd","mediumStart","mediumEnd","largeStart","largeEnd","extraLargeStart","extraLargeEnd","secondaryContainer","onPrimary","onSecondaryContainer","state","Boolean","attribute"],"mappings":"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"}
+{"version":3,"file":"slider.min.js","sources":["../../src/slider/SliderThumbElement.ts","../../src/slider/SliderElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  Focusable,\r\n  FormAssociated,\r\n  formValue,\r\n  M3eFocusRingElement,\r\n  Role,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thumb used to select a value in a slider.\r\n *\r\n * @description\r\n * The `m3e-slider-thumb` component is used within a `m3e-slider` to represent and select a specific value.\r\n * This component supports continuous and discrete input, form association, and accessibility semantics.\r\n * It emits `input` and `change` events to reflect value updates.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider-thumb\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - The value of the thumb.\r\n *\r\n * @fires beforeinput - Dispatched before the value changes.\r\n * @fires input - Dispatched when the value changes.\r\n * @fires change - Dispatched when the value changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.\r\n * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.\r\n * @cssprop --m3e-slider-thumb-color - Active color of the slider thumb when enabled.\r\n * @cssprop --m3e-slider-thumb-pressed-width - Width of the thumb when pressed.\r\n * @cssprop --m3e-slider-thumb-disabled-color - Color of the thumb when disabled.\r\n * @cssprop --m3e-slider-thumb-disabled-opacity - Opacity of the thumb when disabled.\r\n * @cssprop --m3e-slider-label-width - Width of the floating label above the thumb.\r\n * @cssprop --m3e-slider-label-container-color - Background color of the label container.\r\n * @cssprop --m3e-slider-label-color - Text color of the label.\r\n * @cssprop --m3e-slider-label-font-size - Font size of the label text.\r\n * @cssprop --m3e-slider-label-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-slider-label-line-height - Line height of the label text.\r\n * @cssprop --m3e-slider-label-tracking - Letter spacing of the label text.\r\n */\r\n@customElement(\"m3e-slider-thumb\")\r\nexport class M3eSliderThumbElement extends Dirty(\r\n  Touched(FormAssociated(Focusable(Disabled(AttachInternals(Role(LitElement, \"slider\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      outline: none;\r\n      top: 0;\r\n      bottom: 0;\r\n      border-radius: var(--m3e-slider-thumb-shape, ${DesignToken.shape.corner.full});\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      contain: layout style;\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      height: 100%;\r\n      border-radius: inherit;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n      touch-action: none;\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2));\r\n    }\r\n    .focus-ring {\r\n      top: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px));\r\n      left: var(--m3e-focus-ring-thickness, 3px);\r\n      right: var(--m3e-focus-ring-thickness, 3px);\r\n    }\r\n    .label {\r\n      user-select: none;\r\n      position: absolute;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      visibility: var(--_slider-label-visibility, hidden);\r\n      opacity: var(--_slider-label-opacity, 0);\r\n      transform: var(--_slider-label-transform, scale(0));\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n          transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n          visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n      width: var(--m3e-slider-label-width, 3rem);\r\n      height: var(--_m3e-slider-label-height, 2.75rem);\r\n      top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem));\r\n      inset-inline-start: calc(0px - 100%);\r\n      border-radius: var(--m3e-slider-label-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-slider-label-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-slider-label-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-slider-label-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(--m3e-slider-label-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight});\r\n      line-height: var(--m3e-slider-label-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight});\r\n      letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n    }\r\n    @starting-style {\r\n      .label {\r\n        opacity: 0;\r\n        transform: scale(0);\r\n      }\r\n    }\r\n    .handle {\r\n      height: 100%;\r\n      width: var(--m3e-slider-thumb-width, 0.25rem);\r\n      border-radius: inherit;\r\n      transition: ${unsafeCSS(`width ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:active:not([aria-disabled=\"true\"])) .handle {\r\n      width: var(--m3e-slider-thumb-pressed-width, 2px);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .handle {\r\n      background-color: var(--m3e-slider-thumb-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([aria-disabled=\"true\"]) .handle {\r\n      opacity: var(--m3e-slider-thumb-disabled-opacity, 38%);\r\n      background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken.color.onSurface});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .label {\r\n        forced-color-adjust: none;\r\n        background-color: CanvasText;\r\n        color: Canvas;\r\n      }\r\n      :host(:not([aria-disabled=\"true\"])) .handle {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .handle {\r\n        opacity: unset;\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\")\r\n  private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n  /**\r\n   * The value of the thumb.\r\n   * @default null\r\n   */\r\n  @property({ type: Number, reflect: true }) value: number | null = null;\r\n\r\n  /** @inheritdoc */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.value?.toString() ?? null;\r\n  }\r\n\r\n  /** @internal */\r\n  get #labelText(): string {\r\n    return this.closest(\"m3e-slider\")?.displayWith?.(this.value) ?? this.value?.toString() ?? \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = true;\r\n    }\r\n\r\n    super.focus(options);\r\n\r\n    if (this._focusRing) {\r\n      this._focusRing.disabled = this.disabled;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._focusRing?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"value\")) {\r\n      this.dispatchEvent(new Event(\"value-change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"label\" aria-hidden=\"true\">${this.#labelText}</div>\r\n      <div class=\"base\">\r\n        <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"wrapper\">\r\n          <div class=\"handle\"></div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider-thumb\": M3eSliderThumbElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  prefersReducedMotion,\r\n  ResizeController,\r\n  safeStyleMap,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eSliderThumbElement } from \"./SliderThumbElement\";\r\nimport { SliderSize } from \"./SliderSize\";\r\n\r\n/**\r\n * Allows for the selection of numeric values from a range.\r\n *\r\n * @description\r\n * The `m3e-slider` component enables users to select a numeric value from a continuous or discrete range.\r\n * Designed according to Material 3 principles, it supports labeled value indicators, tick marks, and\r\n * snapping behavior.\r\n *\r\n * @example\r\n * The following example illustrates a labelled slider with thumb used to select a single numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"50\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.\r\n * ```html\r\n * <m3e-slider labelled>\r\n *  <m3e-slider-thumb value=\"25\"></m3e-slider-thumb>\r\n *  <m3e-slider-thumb value=\"75\"></m3e-slider-thumb>\r\n * </m3e-slider>\r\n * ```\r\n *\r\n * @tag m3e-slider\r\n *\r\n * @slot - Renders the thumbs of the slider.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr discrete - Whether to show tick marks.\r\n * @attr labelled - Whether to show value labels when activated.\r\n * @attr max - The maximum allowable value.\r\n * @attr min - The minimum allowable value.\r\n * @attr step - The value at which the thumb will snap.\r\n * @attr size - The size of the slider.\r\n *\r\n * @fires beforeinput - Dispatched before the value of a thumb changes.\r\n * @fires input - Dispatched when the value of a thumb changes.\r\n * @fires change - Dispatched when the value of a thumb changes.\r\n *\r\n * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.\r\n * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.\r\n * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.\r\n * @cssprop --m3e-slider-large-height - Height of the slider when size is large.\r\n * @cssprop --m3e-slider-extra-large-height - Height of the slider when size is extra-large.\r\n * @cssprop --m3e-slider-small-active-track-shape - Corner shape of the active track for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-active-track-start-shape - Corner shape of the inactive track start for small sliders.\r\n * @cssprop --m3e-slider-small-inactive-track-end-shape - Corner shape of the inactive track end for small sliders.\r\n * @cssprop --m3e-slider-medium-active-track-shape - Corner shape of the active track for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-active-track-start-shape - Corner shape of the inactive track start for medium sliders.\r\n * @cssprop --m3e-slider-medium-inactive-track-end-shape - Corner shape of the inactive track end for medium sliders.\r\n * @cssprop --m3e-slider-large-active-track-shape - Corner shape of the active track for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-active-track-start-shape - Corner shape of the inactive track start for large sliders.\r\n * @cssprop --m3e-slider-large-inactive-track-end-shape - Corner shape of the inactive track end for large sliders.\r\n * @cssprop --m3e-slider-extra-large-active-track-shape - Corner shape of the active track for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-active-track-start-shape - Corner shape of the inactive track start for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-large-inactive-track-end-shape - Corner shape of the inactive track end for extra-large sliders.\r\n * @cssprop --m3e-slider-extra-small-track-height - Height of the track for extra-small sliders.\r\n * @cssprop --m3e-slider-small-track-height - Height of the track for small sliders.\r\n * @cssprop --m3e-slider-medium-track-height - Height of the track for medium sliders.\r\n * @cssprop --m3e-slider-large-track-height - Height of the track for large sliders.\r\n * @cssprop --m3e-slider-extra-large-track-height - Height of the track for extra-large sliders.\r\n * @cssprop --m3e-slider-tick-size - Size of each tick mark.\r\n * @cssprop --m3e-slider-tick-shape - Corner shape of each tick mark.\r\n * @cssprop --m3e-slider-inactive-track-color - Background color of the inactive track when enabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-color - Base color of the inactive track when disabled.\r\n * @cssprop --m3e-slider-disabled-inactive-track-opacity - Opacity of the inactive track when disabled.\r\n * @cssprop --m3e-slider-active-track-color - Background color of the active track when enabled.\r\n * @cssprop --m3e-slider-disabled-active-track-color - Base color of the active track when disabled.\r\n * @cssprop --m3e-slider-disabled-active-track-opacity - Opacity of the active track when disabled.\r\n * @cssprop --m3e-slider-tick-active-color - Color of active ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-active-color - Color of active ticks when disabled.\r\n * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.\r\n * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.\r\n */\r\n@customElement(\"m3e-slider\")\r\nexport class M3eSliderElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      min-inline-size: var(--m3e-slider-min-width, 12.5rem);\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([disabled])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([size=\"extra-small\"]),\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-slider-small-height, 2.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-small\"]) .base,\r\n    :host(:not(:dir(rtl))[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-small\"]) .base,\r\n    :host(:dir(rtl)[size=\"small\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-small-active-track-shape, ${DesignToken.shape.corner.smallEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-small-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.smallEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-small-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.smallStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-small\"]) .track {\r\n      height: calc(var(--m3e-slider-extra-small-track-height, 1rem));\r\n    }\r\n    :host([size=\"small\"]) .track {\r\n      height: calc(var(--m3e-slider-small-track-height, 1.5rem));\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-slider-medium-height, 3.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-medium-active-track-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"medium\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-medium-active-track-shape, ${DesignToken.shape.corner.mediumEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-medium-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.mediumEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-medium-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.mediumStart}\r\n      );\r\n    }\r\n    :host([size=\"medium\"]) .track {\r\n      height: var(--m3e-slider-medium-track-height, 2.5rem);\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-slider-large-height, 4.25rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeStart});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"large\"]) .base {\r\n      --_slider-active-track-shape: var(--m3e-slider-large-active-track-shape, ${DesignToken.shape.corner.largeEnd});\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.largeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.largeStart}\r\n      );\r\n    }\r\n    :host([size=\"large\"]) .track {\r\n      height: var(--m3e-slider-large-track-height, 3.5rem);\r\n    }\r\n    :host([size=\"extra-large\"]) {\r\n      height: var(--m3e-slider-extra-large-height, 6.75rem);\r\n    }\r\n    :host(:not(:dir(rtl))[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n    }\r\n    :host(:dir(rtl)[size=\"extra-large\"]) .base {\r\n      --_slider-active-track-shape: var(\r\n        --m3e-slider-extra-large-active-track-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-start-shape: var(\r\n        --m3e-slider-extra-large-inactive-active-track-start-shape,\r\n        ${DesignToken.shape.corner.extraLargeEnd}\r\n      );\r\n      --_slider-inactive-track-end-shape: var(\r\n        --m3e-slider-extra-large-inactive-track-end-shape,\r\n        ${DesignToken.shape.corner.extraLargeStart}\r\n      );\r\n    }\r\n    :host([size=\"extra-large\"]) .track {\r\n      height: var(--m3e-slider-extra-large-track-height, 6rem);\r\n    }\r\n    :host(:is(:state(--animating), :--animating)) .track-active,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.start,\r\n    :host(:is(:state(--animating), :--animating)) .track-inactive.end {\r\n      transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects},\r\n        width ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    .base {\r\n      contain: layout style;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n      outline: none;\r\n      touch-action: none;\r\n    }\r\n    .track {\r\n      contain: layout style paint;\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      touch-action: none;\r\n    }\r\n    .track-inactive,\r\n    .track-active {\r\n      contain: layout style paint;\r\n      position: absolute;\r\n      height: 100%;\r\n      touch-action: none;\r\n    }\r\n    .track-active {\r\n      margin-inline-start: var(--_slider-active-track-offset, 0px);\r\n      width: var(--_slider-active-track-size, 0px);\r\n      border-radius: var(--_slider-active-track-middle-shape, var(--_slider-active-track-shape));\r\n    }\r\n    .track-inactive.start {\r\n      width: var(--_slider-inactive-track-before-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-start-shape);\r\n    }\r\n    .track-inactive.end {\r\n      margin-inline-start: var(--_slider-inactive-track-after-offset, 0px);\r\n      width: var(--_slider-inactive-track-after-size, 0px);\r\n      border-radius: var(--_slider-inactive-track-end-shape);\r\n    }\r\n    .ticks {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      overflow: visible;\r\n      touch-action: none;\r\n    }\r\n    .tick {\r\n      position: absolute;\r\n      top: 0;\r\n      touch-action: none;\r\n      inset-inline-start: calc(var(--m3e-slider-tick-size, 0.25rem) + calc(var(--m3e-slider-tick-size, 0.25rem) / 2));\r\n      width: var(--m3e-slider-tick-size, 0.25rem);\r\n      height: var(--m3e-slider-tick-size, 0.25rem);\r\n      border-radius: var(--m3e-slider-tick-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not([disabled])) .track-inactive {\r\n      background-color: var(--m3e-slider-inactive-track-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([disabled]) .track-inactive {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-inactive-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-inactive-track-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .track-active {\r\n      background-color: var(--m3e-slider-active-track-color, ${DesignToken.color.primary});\r\n    }\r\n    :host([disabled]) .track-active {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-slider-disabled-active-track-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-slider-disabled-active-track-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([disabled])) .tick.active {\r\n      background-color: var(--m3e-slider-tick-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    :host([disabled]) .tick.active {\r\n      background-color: var(--m3e-slider-disabled-tick-active-color, ${DesignToken.color.inverseOnSurface});\r\n    }\r\n    :host(:not([disabled])) .tick.inactive {\r\n      background-color: var(--m3e-slider-tick-inactive-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([disabled]) .tick.inactive {\r\n      background-color: var(--m3e-slider-disabled-tick-inactive-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([discrete])) .tick.active {\r\n      display: none;\r\n    }\r\n    :host(:hover[labelled]) .base,\r\n    :host(:focus-within[labelled]) .base {\r\n      --_slider-label-visibility: visible;\r\n      --_slider-label-opacity: 1;\r\n      --_slider-label-transform: scale(1);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:not([disabled])) .track-inactive {\r\n        background-color: unset;\r\n      }\r\n      :host(:not([disabled])) .base.range .track-inactive.start,\r\n      :host(:not([disabled])) .track-inactive.end {\r\n        border: 1px solid CanvasText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host(:not([disabled])) .tick.inactive {\r\n        background-color: CanvasText;\r\n      }\r\n      :host(:not([disabled])) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n      :host(:not([disabled])) .track-active {\r\n        background-color: CanvasText;\r\n      }\r\n      :host([disabled]) .base.range .track-inactive.start,\r\n      :host([disabled]) .track-inactive.end {\r\n        border: 1px solid GrayText;\r\n        box-sizing: border-box;\r\n      }\r\n      :host([disabled]) .track-active {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.inactive {\r\n        background-color: GrayText;\r\n      }\r\n      :host([disabled]) .tick.active {\r\n        background-color: Canvas;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n  /** @private */\r\n  @state() private _ticks = new Array<{ value: number; active: boolean }>();\r\n\r\n  /** @private */ readonly #changedThumbs = new Set<M3eSliderThumbElement>();\r\n  /** @private */ #thumbs = new Array<M3eSliderThumbElement>();\r\n  /** @private */ #activeThumb?: M3eSliderThumbElement;\r\n  /** @private */ #cachedWidth = 0;\r\n  /** @private */ #cachedThumbWidth = 0;\r\n  /** @private */ #cachedLeft = 0;\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, { callback: () => this.#updateDimensions(true) });\r\n  }\r\n\r\n  /**\r\n   * The size of the slider.\r\n   * @default \"extra-small\"\r\n   */\r\n  @property({ reflect: true }) size: SliderSize = \"extra-small\";\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether to show tick marks.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) discrete = false;\r\n\r\n  /**\r\n   * The minimum allowable value.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) min = 0;\r\n\r\n  /**\r\n   * The maximum allowable value.\r\n   * @default 100\r\n   */\r\n  @property({ type: Number }) max = 100;\r\n\r\n  /**\r\n   * The value at which the thumb will snap.\r\n   * @default 1\r\n   */\r\n  @property({ type: Number }) step = 1;\r\n\r\n  /**\r\n   * Whether to show value labels when activated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) labelled = false;\r\n\r\n  /** The function used to format display values. */\r\n  @property({ attribute: false }) displayWith: ((value: number | null) => string) | null = null;\r\n\r\n  /** The thumbs used to select values. */\r\n  get thumbs(): readonly M3eSliderThumbElement[] {\r\n    return this.#thumbs;\r\n  }\r\n\r\n  /** Whether the slider is a range slider. */\r\n  get isRange(): boolean {\r\n    return this.#thumbs.length > 1;\r\n  }\r\n\r\n  /** The thumb used to select a value. */\r\n  get thumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[0] ?? null;\r\n  }\r\n\r\n  /** The thumb used to select the lower value of a range slider. */\r\n  get lowerThumb(): M3eSliderThumbElement | null {\r\n    return this.thumb;\r\n  }\r\n\r\n  /** The thumb used to select the upper value of a range slider. */\r\n  get upperThumb(): M3eSliderThumbElement | null {\r\n    return this.#thumbs[1] ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.#updateDimensions(true);\r\n      this.requestUpdate();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changedThumbs.clear();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"disabled\")) {\r\n      this.#thumbs.forEach((x) => (x.disabled = this.disabled));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div\r\n      class=\"base\"\r\n      tabindex=\"${ifDefined(!this.disabled ? \"-1\" : undefined)}\"\r\n      @pointerdown=\"${this.#handlePointerDown}\"\r\n      @pointermove=\"${this.#handlePointerMove}\"\r\n      @pointerup=\"${this.#handlePointerUp}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @keyup=\"${this.#handleKeyUp}\"\r\n      @value-change=\"${this.#handleThumbChange}\"\r\n    >\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"track-inactive start\"></div>\r\n        <div class=\"track-active\"></div>\r\n        <div class=\"track-inactive end\"></div>\r\n      </div>\r\n      <div class=\"ticks\" aria-hidden=\"true\">${this._ticks.map((x) => this.#renderTick(x))}</div>\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderTick(tick: { value: number; active: boolean }) {\r\n    return html`<div\r\n      class=\"tick ${tick.active ? \"active\" : \"inactive\"}\"\r\n      style=\"${safeStyleMap({\r\n        transform: `translate(${M3eDirectionality.current === \"rtl\" ? -this.#pointFromValue(tick.value) : this.#pointFromValue(tick.value)}px, 0)`,\r\n      })}\"\r\n    ></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#thumbs = (<HTMLSlotElement>e.target)\r\n      .assignedElements({ flatten: true })\r\n      .filter((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#thumbs.length > 2) {\r\n      this.#thumbs.length = 2;\r\n    }\r\n    if (this.isRange) {\r\n      this._base?.style.setProperty(\"--_slider-active-track-middle-shape\", `0`);\r\n    } else {\r\n      this._base?.style.removeProperty(\"--_slider-active-track-middle-shape\");\r\n    }\r\n\r\n    this.#updateThumbs();\r\n  }\r\n\r\n  /** @private */\r\n  #updateThumbs(): void {\r\n    this.#thumbs.forEach((thumb, i) => {\r\n      if (this.disabled) {\r\n        thumb.disabled = true;\r\n      }\r\n      thumb.ariaValueMin = `${this.#thumbs[i - 1]?.value ?? this.min}`;\r\n      thumb.ariaValueMax = `${this.#thumbs[i + 1]?.value ?? this.max}`;\r\n      thumb.ariaValueNow = `${thumb.value ?? this.#thumbs[i - 1]?.value ?? this.min}`;\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #pointFromValue(value: number): number {\r\n    return (this.#cachedWidth - this.#cachedThumbWidth) * ((value - this.min) / (this.max - this.min));\r\n  }\r\n\r\n  /** @private */\r\n  #valueFromPoint(e: PointerEvent): number {\r\n    const pos =\r\n      M3eDirectionality.current === \"rtl\"\r\n        ? this.#cachedLeft + this.#cachedWidth - e.clientX\r\n        : e.clientX - this.#cachedLeft;\r\n    const step = this.step === 0 ? 1 : this.step;\r\n    const numSteps = Math.floor((this.max - this.min) / step);\r\n    const percentage = pos / this.#cachedWidth;\r\n    const fixedPercentage = Math.round(percentage * numSteps) / numSteps;\r\n    const impreciseValue = fixedPercentage * (this.max - this.min) + this.min;\r\n    return Math.round(impreciseValue / step) * step;\r\n  }\r\n\r\n  /** @private */\r\n  #updateCachedDimensions(force = false): void {\r\n    if (!this.lowerThumb) return;\r\n    this.#cachedWidth = !force && this.#cachedWidth > 0 ? this.#cachedWidth : this.clientWidth;\r\n    this.#cachedThumbWidth =\r\n      !force && this.#cachedThumbWidth > 0 ? this.#cachedThumbWidth : this.lowerThumb.clientWidth;\r\n    this.#cachedLeft = !force && this.#cachedLeft > 0 ? this.#cachedLeft : this.getBoundingClientRect().left;\r\n  }\r\n\r\n  /** @private */\r\n  #updateDimensions(force = false): void {\r\n    this.#updateCachedDimensions(force);\r\n    if (!this.lowerThumb) return;\r\n\r\n    const lowerValue = this.lowerThumb.value ?? this.min;\r\n    const lowerPos = this.#pointFromValue(lowerValue);\r\n    this.lowerThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -lowerPos : lowerPos}px, 0)`;\r\n\r\n    if (!this.upperThumb) {\r\n      this._base?.classList.toggle(\"range\", false);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - lowerPos - this.#cachedThumbWidth}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i < lowerValue);\r\n    } else {\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n      const upperPos = this.#pointFromValue(upperValue);\r\n      this.upperThumb.style.transform = `translate(${M3eDirectionality.current === \"rtl\" ? -upperPos : upperPos}px, 0)`;\r\n\r\n      this._base?.classList.toggle(\"range\", true);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-before-size\", `${lowerPos}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-offset\", `${lowerPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-active-track-size\", `${upperPos - lowerPos - this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\"--_slider-inactive-track-after-offset\", `${upperPos + this.#cachedThumbWidth}px`);\r\n      this._base?.style.setProperty(\r\n        \"--_slider-inactive-track-after-size\",\r\n        `${this.#cachedWidth - this.#cachedThumbWidth - upperPos}px`,\r\n      );\r\n\r\n      this.#updateTicks((i) => i > lowerValue && i < upperValue);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateTicks(active: (value: number) => boolean): void {\r\n    this._ticks = [];\r\n    if (this.discrete && this.step > 1) {\r\n      for (let i = this.min; i <= this.max; i += this.step) {\r\n        this._ticks.push({ value: i, active: active(i) });\r\n      }\r\n    } else {\r\n      this._ticks.push({ value: this.min, active: active(this.min) });\r\n      if (this.min < 0 && this.max > 0) {\r\n        this._ticks.push({ value: 0, active: active(0) });\r\n      }\r\n      this._ticks.push({ value: this.max, active: active(this.max) });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.setPointerCapture(e.pointerId);\r\n    }\r\n\r\n    this.#changedThumbs.clear();\r\n\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (this.#activeThumb) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n\r\n    if (!this.upperThumb) {\r\n      if (!this.lowerThumb.disabled) {\r\n        this.#changeThumb(this.lowerThumb, value, true);\r\n        this.#activeThumb = this.lowerThumb;\r\n      }\r\n    } else {\r\n      const lowerValue = this.lowerThumb.value ?? this.min;\r\n      const upperValue = this.upperThumb.value ?? lowerValue;\r\n\r\n      if (value < lowerValue) {\r\n        if (!this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        }\r\n      } else if (value > upperValue) {\r\n        if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      } else {\r\n        const mid = (lowerValue + upperValue) / 2;\r\n        if (value < mid && !this.lowerThumb.disabled) {\r\n          this.#changeThumb(this.lowerThumb, value, true);\r\n          this.#activeThumb = this.lowerThumb;\r\n        } else if (!this.upperThumb.disabled) {\r\n          this.#changeThumb(this.upperThumb, value, true);\r\n          this.#activeThumb = this.upperThumb;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerMove(e: PointerEvent): void {\r\n    if (\r\n      !(e.target instanceof HTMLElement) ||\r\n      !e.target.hasPointerCapture(e.pointerId) ||\r\n      !this.#activeThumb ||\r\n      this.#activeThumb.disabled\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const value = this.#valueFromPoint(e);\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.min(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    if (hasCustomState(this, \"--animating\")) {\r\n      deleteCustomState(this, \"--animating\");\r\n      this.#activeThumb.style.transition = \"\";\r\n    }\r\n\r\n    this.#changeThumb(this.#activeThumb, Math.min(max, Math.max(min, value)));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerUp(e: PointerEvent): void {\r\n    if (e.pointerType === \"mouse\" && e.button > 1) return;\r\n    if (!this.lowerThumb || this.disabled) return;\r\n\r\n    if (e.target instanceof HTMLElement) {\r\n      e.target.releasePointerCapture(e.pointerId);\r\n    }\r\n\r\n    if (this.#activeThumb && !this.#activeThumb.disabled) {\r\n      this.#commitThumb(this.#activeThumb);\r\n      this.#activeThumb.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n\r\n    if (!this.#activeThumb) return;\r\n\r\n    const value = this.#activeThumb.value ?? 0;\r\n\r\n    let min = this.min;\r\n    let max = this.max;\r\n\r\n    if (this.#activeThumb === this.upperThumb) {\r\n      min = Math.max(min, this.lowerThumb?.value ?? 0);\r\n    } else if (this.upperThumb) {\r\n      max = Math.max(max, this.upperThumb.value ?? this.max);\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"Home\":\r\n        this.#changeThumb(this.#activeThumb, min);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"End\":\r\n        this.#changeThumb(this.#activeThumb, max);\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageUp\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"PageDown\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - (this.step > 1 ? this.step : 10)));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + (this.step > 1 ? this.step : 10)));\r\n        }\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n\r\n        break;\r\n\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        if (M3eDirectionality.current === \"ltr\") {\r\n          this.#changeThumb(this.#activeThumb, Math.min(max, value + this.step));\r\n        } else {\r\n          this.#changeThumb(this.#activeThumb, Math.max(min, value - this.step));\r\n        }\r\n\r\n        e.preventDefault();\r\n        break;\r\n\r\n      case \" \":\r\n        e.preventDefault();\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyUp(e: KeyboardEvent): void {\r\n    const activeThumb = e.composedPath().find((x) => x instanceof M3eSliderThumbElement);\r\n    if (activeThumb) {\r\n      this.#commitThumb(activeThumb);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleThumbChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.#updateThumbs();\r\n    this.#updateDimensions();\r\n  }\r\n\r\n  /** @private */\r\n  #changeThumb(thumb: M3eSliderThumbElement, value: number, animate = false): void {\r\n    if (thumb.value === value) return;\r\n\r\n    if (thumb.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      if (animate && !prefersReducedMotion()) {\r\n        addCustomState(this, \"--animating\");\r\n        thumb.addEventListener(\r\n          \"transitionend\",\r\n          () => {\r\n            thumb.style.transition = \"\";\r\n            deleteCustomState(this, \"--animating\");\r\n          },\r\n          { once: true },\r\n        );\r\n        thumb.style.transition = `transform ${DesignToken.motion.spring.fastEffects}`;\r\n      }\r\n      this.#changedThumbs.add(thumb);\r\n      thumb.value = value;\r\n      thumb.markAsDirty();\r\n      thumb.markAsTouched();\r\n      thumb.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #commitThumb(thumb: M3eSliderThumbElement): void {\r\n    if (this.#changedThumbs.has(thumb)) {\r\n      thumb.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      this.#changedThumbs.delete(thumb);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slider\": M3eSliderElement;\r\n  }\r\n}\r\n"],"names":["M3eSliderThumbElement","Dirty","Touched","FormAssociated","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","this","value","_M3eSliderThumbElement_instances","WeakSet","formValue","toString","focus","options","_focusRing","disabled","super","firstUpdated","_changedProperties","attach","update","changedProperties","has","dispatchEvent","Event","bubbles","render","html","__classPrivateFieldGet","_M3eSliderThumbElement_labelText_get","closest","displayWith","styles","css","DesignToken","shape","corner","full","unsafeCSS","motion","duration","short3","easing","standard","color","inverseSurface","inverseOnSurface","typescale","label","medium","fontSize","fontWeight","lineHeight","tracking","short2","primary","onSurface","__decorate","query","prototype","property","type","Number","reflect","customElement","M3eSliderElement","_M3eSliderElement_directionalitySubscription","set","_ticks","Array","_M3eSliderElement_changedThumbs","Set","_M3eSliderElement_thumbs","_M3eSliderElement_activeThumb","_M3eSliderElement_cachedWidth","_M3eSliderElement_cachedThumbWidth","_M3eSliderElement_cachedLeft","size","discrete","min","max","step","labelled","ResizeController","callback","_M3eSliderElement_instances","_M3eSliderElement_updateDimensions","thumbs","isRange","length","thumb","lowerThumb","upperThumb","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","call","requestUpdate","disconnectedCallback","clear","updated","forEach","x","ifDefined","undefined","_M3eSliderElement_handlePointerDown","_M3eSliderElement_handlePointerMove","_M3eSliderElement_handlePointerUp","_M3eSliderElement_handleKeyDown","_M3eSliderElement_handleKeyUp","_M3eSliderElement_handleThumbChange","map","_M3eSliderElement_renderTick","_M3eSliderElement_handleSlotChange","tick","active","safeStyleMap","transform","current","_M3eSliderElement_pointFromValue","e","target","assignedElements","flatten","filter","_base","style","setProperty","removeProperty","_M3eSliderElement_updateThumbs","i","ariaValueMin","ariaValueMax","ariaValueNow","pos","clientX","numSteps","Math","floor","percentage","impreciseValue","round","_M3eSliderElement_updateCachedDimensions","force","clientWidth","getBoundingClientRect","left","lowerValue","lowerPos","upperValue","upperPos","classList","toggle","_M3eSliderElement_updateTicks","push","pointerType","button","HTMLElement","setPointerCapture","pointerId","composedPath","find","_M3eSliderElement_valueFromPoint","_M3eSliderElement_changeThumb","hasPointerCapture","hasCustomState","deleteCustomState","transition","releasePointerCapture","key","preventDefault","activeThumb","_M3eSliderElement_commitThumb","stopPropagation","animate","cancelable","prefersReducedMotion","addCustomState","addEventListener","once","spring","fastEffects","add","markAsDirty","markAsTouched","delete","smallStart","smallEnd","mediumStart","mediumEnd","largeStart","largeEnd","extraLargeStart","extraLargeEnd","secondaryContainer","onPrimary","onSecondaryContainer","state","Boolean","attribute"],"mappings":";;;;;gpBAoEO,IAAMA,EAAN,cAAoCC,EACzCC,EAAQC,EAAeC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,iBADtEC,WAAAA,mCA4HsCC,KAAAC,MAAuB,IAmDpE,CAhDE,KAAaC,EAAA,IAAAC,QAACC,MACZ,OAAOJ,KAAKC,OAAOI,YAAc,IACnC,CAQSC,KAAAA,CAAMC,GACTP,KAAKQ,aACPR,KAAKQ,WAAWC,UAAW,GAG7BC,MAAMJ,MAAMC,GAERP,KAAKQ,aACPR,KAAKQ,WAAWC,SAAWT,KAAKS,SAEpC,CAGmBE,YAAAA,CAAaC,GAC9BF,MAAMC,aAAaC,GACnBZ,KAAKQ,YAAYK,OAAOb,KAC1B,CAGmBc,MAAAA,CAAOC,GACxBL,MAAMI,OAAOC,GAETA,EAAkBC,IAAI,UACxBhB,KAAKiB,cAAc,IAAIC,MAAM,eAAgB,CAAEC,SAAS,IAE5D,CAGmBC,MAAAA,GACjB,OAAOC,CAAI,yCAAyCC,EAAAtB,KAAIE,EAAA,IAAAqB,2EAEJvB,KAAKS,oIAM3D,qEAzCE,OAAOT,KAAKwB,QAAQ,eAAeC,cAAczB,KAAKC,QAAUD,KAAKC,OAAOI,YAAc,EAC5F,EAlIgBf,EAAAoC,OAAyBC,CAAG,sJAQOC,EAAYC,MAAMC,OAAOC,ijCA6C1DC,EACZ,WAAWJ,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,mCAC7DT,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,mCAC/DT,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,sTAMlCT,EAAYC,MAAMC,OAAOC,oEACZH,EAAYU,MAAMC,yDACvCX,EAAYU,MAAME,mEACVZ,EAAYa,UAAUJ,SAASK,MAAMC,OAAOC,+DACxChB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOE,iEAC5CjB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOG,iEAC5ClB,EAAYa,UAAUJ,SAASK,MAAMC,OAAOI,2LAYjFf,EAAU,SAASJ,EAAYK,OAAOC,SAASc,UAAUpB,EAAYK,OAAOG,OAAOC,0NAM/CT,EAAYU,MAAMW,wKAITrB,EAAYU,MAAMY,2WAwBhEC,EAAA,CADAC,EAAM,gBAC2B9D,EAAA+D,UAAA,qBAMPF,EAAA,CAA1CG,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAAoCnE,EAAA+D,UAAA,aAAA,GA5H5D/D,EAAqB6D,EAAA,CADjCO,EAAc,qBACFpE,GC8BN,IAAMqE,GAAN,cAA+B/D,EAAgBE,IAqSpDC,WAAAA,GACEW,oBAhBckD,EAAAC,IAAA7D,aAMCA,KAAA8D,OAAS,IAAIC,MAELC,EAAAH,IAAA7D,KAAiB,IAAIiE,KAC9BC,EAAAL,IAAA7D,KAAU,IAAI+D,OACdI,EAAAN,IAAA7D,aACAoE,EAAAP,IAAA7D,KAAe,GACfqE,EAAAR,IAAA7D,KAAoB,GACpBsE,EAAAT,IAAA7D,KAAc,GAWDA,KAAAuE,KAAmB,cAMJvE,KAAAS,UAAW,EAMXT,KAAAwE,UAAW,EAM3BxE,KAAAyE,IAAM,EAMNzE,KAAA0E,IAAM,IAMN1E,KAAA2E,KAAO,EAMN3E,KAAA4E,UAAW,EAGR5E,KAAAyB,YAAyD,KA9CvF,IAAIoD,EAAiB7E,KAAM,CAAE8E,SAAUA,IAAMxD,EAAAtB,KAAI+E,EAAA,IAAAC,QAAJhF,MAAuB,IACtE,CAgDA,UAAIiF,GACF,OAAO3D,EAAAtB,KAAIkE,EAAA,IACb,CAGA,WAAIgB,GACF,OAAO5D,EAAAtB,KAAIkE,EAAA,KAASiB,OAAS,CAC/B,CAGA,SAAIC,GACF,OAAO9D,EAAAtB,KAAIkE,EAAA,KAAS,IAAM,IAC5B,CAGA,cAAImB,GACF,OAAOrF,KAAKoF,KACd,CAGA,cAAIE,GACF,OAAOhE,EAAAtB,KAAIkE,EAAA,KAAS,IAAM,IAC5B,CAGSqB,iBAAAA,GACP7E,MAAM6E,oBAENC,EAAAxF,KAAI4D,EAA+B6B,EAAkBC,QAAQ,KAC3DpE,EAAAtB,KAAI+E,EAAA,IAAAC,GAAkBW,KAAtB3F,MAAuB,GACvBA,KAAK4F,sBAET,CAGSC,oBAAAA,GACPnF,MAAMmF,uBACNvE,EAAAtB,KAAIgE,EAAA,KAAgB8B,QACpBxE,EAAAtB,KAAI4D,EAAA,MAA8B+B,KAAlC3F,KACF,CAGmB+F,OAAAA,CAAQnF,GACzBF,MAAMqF,QAAQnF,GAEVA,EAAmBI,IAAI,aACzBM,EAAAtB,YAAagG,QAASC,GAAOA,EAAExF,SAAWT,KAAKS,SAEnD,CAGmBW,MAAAA,GACjB,OAAOC,CAAI,+BAEG6E,EAAWlG,KAAKS,cAAkB0F,EAAP,wBACvB7E,EAAAtB,KAAI+E,EAAA,IAAAqB,qBACJ9E,EAAAtB,KAAI+E,EAAA,IAAAsB,mBACN/E,EAAAtB,KAAI+E,EAAA,IAAAuB,iBACNhF,EAAAtB,KAAI+E,EAAA,IAAAwB,eACNjF,EAAAtB,KAAI+E,EAAA,IAAAyB,sBACGlF,EAAAtB,KAAI+E,EAAA,IAAA0B,uMAOmBzG,KAAK8D,OAAO4C,IAAKT,GAAM3E,EAAAtB,KAAI+E,EAAA,IAAA4B,GAAYhB,KAAhB3F,KAAiBiG,+BAC3D3E,EAAAtB,KAAI+E,EAAA,IAAA6B,mBAE7B,8HAGYC,GACV,OAAOxF,CAAI,oBACKwF,EAAKC,OAAS,SAAW,sBAC9BC,EAAa,CACpBC,UAAW,aAA2C,QAA9BvB,EAAkBwB,SAAqB3F,EAAAtB,KAAI+E,EAAA,IAAAmC,QAAJlH,KAAqB6G,EAAK5G,OAASqB,EAAAtB,KAAI+E,EAAA,IAAAmC,GAAgBvB,KAApB3F,KAAqB6G,EAAK5G,0BAGlI,aAGkBkH,GAChB3B,EAAAxF,KAAIkE,EAA6BiD,EAAEC,OAChCC,iBAAiB,CAAEC,SAAS,IAC5BC,OAAQtB,GAAMA,aAAa3G,GAAsB,KAEhDgC,EAAAtB,KAAIkE,EAAA,KAASiB,OAAS,IACxB7D,EAAAtB,KAAIkE,EAAA,KAASiB,OAAS,GAEpBnF,KAAKkF,QACPlF,KAAKwH,OAAOC,MAAMC,YAAY,sCAAuC,KAErE1H,KAAKwH,OAAOC,MAAME,eAAe,uCAGnCrG,EAAAtB,KAAI+E,EAAA,IAAA6C,GAAcjC,KAAlB3F,KACF,eAIEsB,EAAAtB,KAAIkE,EAAA,KAAS8B,QAAQ,CAACZ,EAAOyC,KACvB7H,KAAKS,WACP2E,EAAM3E,UAAW,GAEnB2E,EAAM0C,aAAe,GAAGxG,EAAAtB,YAAa6H,EAAI,IAAI5H,OAASD,KAAKyE,MAC3DW,EAAM2C,aAAe,GAAGzG,EAAAtB,YAAa6H,EAAI,IAAI5H,OAASD,KAAK0E,MAC3DU,EAAM4C,aAAe,GAAG5C,EAAMnF,OAASqB,EAAAtB,KAAIkE,EAAA,KAAS2D,EAAI,IAAI5H,OAASD,KAAKyE,OAE9E,aAGgBxE,GACd,OAAQqB,EAAAtB,KAAIoE,EAAA,KAAgB9C,EAAAtB,KAAIqE,EAAA,QAAwBpE,EAAQD,KAAKyE,MAAQzE,KAAK0E,IAAM1E,KAAKyE,KAC/F,aAGgB0C,GACd,MAAMc,EAC0B,QAA9BxC,EAAkBwB,QACd3F,EAAAtB,KAAIsE,EAAA,KAAehD,EAAAtB,KAAIoE,EAAA,KAAgB+C,EAAEe,QACzCf,EAAEe,QAAU5G,EAAAtB,YACZ2E,EAAqB,IAAd3E,KAAK2E,KAAa,EAAI3E,KAAK2E,KAClCwD,EAAWC,KAAKC,OAAOrI,KAAK0E,IAAM1E,KAAKyE,KAAOE,GAC9C2D,EAAaL,EAAM3G,EAAAtB,YAEnBuI,EADkBH,KAAKI,MAAMF,EAAaH,GAAYA,GAClBnI,KAAK0E,IAAM1E,KAAKyE,KAAOzE,KAAKyE,IACtE,OAAO2D,KAAKI,MAAMD,EAAiB5D,GAAQA,CAC7C,EAGwB8D,EAAA,SAAAC,GAAQ,GACzB1I,KAAKqF,aACVG,EAAAxF,QAAqB0I,GAASpH,EAAAtB,KAAIoE,EAAA,KAAgB,EAAI9C,EAAAtB,KAAIoE,EAAA,KAAgBpE,KAAK2I,YAAW,KAC1FnD,EAAAxF,KAAIqE,GACDqE,GAASpH,EAAAtB,KAAIqE,EAAA,KAAqB,EAAI/C,EAAAtB,KAAIqE,EAAA,KAAqBrE,KAAKqF,WAAWsD,YAAW,KAC7FnD,EAAAxF,KAAIsE,GAAgBoE,GAASpH,EAAAtB,KAAIsE,EAAA,KAAe,EAAIhD,EAAAtB,KAAIsE,EAAA,KAAetE,KAAK4I,wBAAwBC,KAAI,KAC1G,EAGkB7D,EAAA,SAAA0D,GAAQ,GAExB,GADApH,EAAAtB,KAAI+E,EAAA,IAAA0D,GAAwB9C,KAA5B3F,KAA6B0I,IACxB1I,KAAKqF,WAAY,OAEtB,MAAMyD,EAAa9I,KAAKqF,WAAWpF,OAASD,KAAKyE,IAC3CsE,EAAWzH,EAAAtB,KAAI+E,EAAA,IAAAmC,QAAJlH,KAAqB8I,GAGtC,GAFA9I,KAAKqF,WAAWoC,MAAMT,UAAY,aAA2C,QAA9BvB,EAAkBwB,SAAqB8B,EAAWA,UAE5F/I,KAAKsF,WAUH,CACL,MAAM0D,EAAahJ,KAAKsF,WAAWrF,OAAS6I,EACtCG,EAAW3H,EAAAtB,KAAI+E,EAAA,IAAAmC,QAAJlH,KAAqBgJ,GACtChJ,KAAKsF,WAAWmC,MAAMT,UAAY,aAA2C,QAA9BvB,EAAkBwB,SAAqBgC,EAAWA,UAEjGjJ,KAAKwH,OAAO0B,UAAUC,OAAO,SAAS,GACtCnJ,KAAKwH,OAAOC,MAAMC,YAAY,uCAAwC,GAAGqB,OACzE/I,KAAKwH,OAAOC,MAAMC,YAAY,gCAAiC,GAAGqB,EAAWzH,EAAAtB,KAAIqE,EAAA,UACjFrE,KAAKwH,OAAOC,MAAMC,YAAY,8BAAkCuB,EAAWF,EAAWzH,EAAAtB,KAAIqE,EAAA,KAA7B,MAC7DrE,KAAKwH,OAAOC,MAAMC,YAAY,wCAAyC,GAAGuB,EAAW3H,EAAAtB,KAAIqE,EAAA,UACzFrE,KAAKwH,OAAOC,MAAMC,YAChB,sCACGpG,EAAAtB,KAAIoE,EAAA,KAAgB9C,EAAAtB,YAAyBiJ,EAAhD,MAGF3H,EAAAtB,KAAI+E,EAAA,IAAAqE,GAAazD,KAAjB3F,KAAmB6H,GAAMA,EAAIiB,GAAcjB,EAAImB,EACjD,MAzBEhJ,KAAKwH,OAAO0B,UAAUC,OAAO,SAAS,GACtCnJ,KAAKwH,OAAOC,MAAMC,YAAY,8BAA+B,GAAGqB,OAChE/I,KAAKwH,OAAOC,MAAMC,YAAY,wCAAyC,GAAGqB,EAAWzH,EAAAtB,KAAIqE,EAAA,UACzFrE,KAAKwH,OAAOC,MAAMC,YAChB,sCACGpG,EAAAtB,KAAIoE,EAAA,KAAgB2E,EAAWzH,EAAAtB,KAAIqE,EAAA,KAAtC,MAGF/C,EAAAtB,KAAI+E,EAAA,IAAAqE,GAAazD,KAAjB3F,KAAmB6H,GAAMA,EAAIiB,EAkBjC,aAGahC,GAEX,GADA9G,KAAK8D,OAAS,GACV9D,KAAKwE,UAAYxE,KAAK2E,KAAO,EAC/B,IAAK,IAAIkD,EAAI7H,KAAKyE,IAAKoD,GAAK7H,KAAK0E,IAAKmD,GAAK7H,KAAK2E,KAC9C3E,KAAK8D,OAAOuF,KAAK,CAAEpJ,MAAO4H,EAAGf,OAAQA,EAAOe,UAG9C7H,KAAK8D,OAAOuF,KAAK,CAAEpJ,MAAOD,KAAKyE,IAAKqC,OAAQA,EAAO9G,KAAKyE,OACpDzE,KAAKyE,IAAM,GAAKzE,KAAK0E,IAAM,GAC7B1E,KAAK8D,OAAOuF,KAAK,CAAEpJ,MAAO,EAAG6G,OAAQA,EAAO,KAE9C9G,KAAK8D,OAAOuF,KAAK,CAAEpJ,MAAOD,KAAK0E,IAAKoC,OAAQA,EAAO9G,KAAK0E,MAE5D,aAGmByC,GACjB,GAAsB,UAAlBA,EAAEmC,aAA2BnC,EAAEoC,OAAS,EAAG,OAC/C,IAAKvJ,KAAKqF,YAAcrF,KAAKS,SAAU,OAUvC,GARI0G,EAAEC,kBAAkBoC,aACtBrC,EAAEC,OAAOqC,kBAAkBtC,EAAEuC,WAG/BpI,EAAAtB,KAAIgE,EAAA,KAAgB8B,QAEpBN,EAAAxF,KAAImE,EAAgBgD,EAAEwC,eAAeC,KAAM3D,GAAMA,aAAa3G,QAE1DgC,EAAAtB,KAAImE,EAAA,KACN,OAGF,MAAMlE,EAAQqB,EAAAtB,KAAI+E,EAAA,IAAA8E,QAAJ7J,KAAqBmH,GAEnC,GAAKnH,KAAKsF,WAKH,CACL,MAAMwD,EAAa9I,KAAKqF,WAAWpF,OAASD,KAAKyE,IAC3CuE,EAAahJ,KAAKsF,WAAWrF,OAAS6I,EAE5C,GAAI7I,EAAQ6I,EACL9I,KAAKqF,WAAW5E,WACnBa,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBA,KAAKqF,WAAYpF,GAAO,GAC1CuF,EAAAxF,KAAImE,EAAgBnE,KAAKqF,sBAEtB,GAAIpF,EAAQ+I,EACZhJ,KAAKsF,WAAW7E,WACnBa,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBA,KAAKsF,WAAYrF,GAAO,GAC1CuF,EAAAxF,KAAImE,EAAgBnE,KAAKsF,qBAEtB,CAEDrF,GADS6I,EAAaE,GAAc,IACpBhJ,KAAKqF,WAAW5E,UAClCa,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBA,KAAKqF,WAAYpF,GAAO,GAC1CuF,EAAAxF,KAAImE,EAAgBnE,KAAKqF,iBACfrF,KAAKsF,WAAW7E,WAC1Ba,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBA,KAAKsF,WAAYrF,GAAO,GAC1CuF,EAAAxF,KAAImE,EAAgBnE,KAAKsF,gBAE7B,CACF,MA5BOtF,KAAKqF,WAAW5E,WACnBa,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBA,KAAKqF,WAAYpF,GAAO,GAC1CuF,EAAAxF,KAAImE,EAAgBnE,KAAKqF,gBA2B/B,aAGmB8B,GACjB,KACIA,EAAEC,kBAAkBoC,eACrBrC,EAAEC,OAAO2C,kBAAkB5C,EAAEuC,aAC7BpI,EAAAtB,KAAImE,EAAA,MACL7C,EAAAtB,KAAImE,EAAA,KAAc1D,SAElB,OAGF,MAAMR,EAAQqB,EAAAtB,KAAI+E,EAAA,IAAA8E,QAAJ7J,KAAqBmH,GACnC,IAAI1C,EAAMzE,KAAKyE,IACXC,EAAM1E,KAAK0E,IAEXpD,EAAAtB,KAAImE,EAAA,OAAkBnE,KAAKsF,WAC7Bb,EAAM2D,KAAK1D,IAAID,EAAKzE,KAAKqF,YAAYpF,OAAS,GACrCD,KAAKsF,aACdZ,EAAM0D,KAAK3D,IAAIC,EAAK1E,KAAKsF,WAAWrF,OAASD,KAAK0E,MAGhDsF,EAAehK,KAAM,iBACvBiK,EAAkBjK,KAAM,eACxBsB,EAAAtB,YAAkByH,MAAMyC,WAAa,IAGvC5I,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK3D,IAAIC,EAAK0D,KAAK1D,IAAID,EAAKxE,IACnE,aAGiBkH,GACO,UAAlBA,EAAEmC,aAA2BnC,EAAEoC,OAAS,GACvCvJ,KAAKqF,aAAcrF,KAAKS,WAEzB0G,EAAEC,kBAAkBoC,aACtBrC,EAAEC,OAAO+C,sBAAsBhD,EAAEuC,WAG/BpI,EAAAtB,KAAImE,EAAA,OAAkB7C,EAAAtB,KAAImE,EAAA,KAAc1D,WAC1Ca,EAAAtB,eAAiB2F,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,MACtB7C,EAAAtB,KAAImE,EAAA,KAAc7D,SAEtB,aAGe6G,GAGb,GAFA3B,EAAAxF,KAAImE,EAAgBgD,EAAEwC,eAAeC,KAAM3D,GAAMA,aAAa3G,SAEzDgC,EAAAtB,KAAImE,EAAA,KAAe,OAExB,MAAMlE,EAAQqB,EAAAtB,YAAkBC,OAAS,EAEzC,IAAIwE,EAAMzE,KAAKyE,IACXC,EAAM1E,KAAK0E,IAQf,OANIpD,EAAAtB,KAAImE,EAAA,OAAkBnE,KAAKsF,WAC7Bb,EAAM2D,KAAK1D,IAAID,EAAKzE,KAAKqF,YAAYpF,OAAS,GACrCD,KAAKsF,aACdZ,EAAM0D,KAAK1D,IAAIA,EAAK1E,KAAKsF,WAAWrF,OAASD,KAAK0E,MAG5CyC,EAAEiD,KACR,IAAK,OACH9I,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeM,GACrC0C,EAAEkD,iBACF,MAEF,IAAK,MACH/I,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeO,GACrCyC,EAAEkD,iBACF,MAEF,IAAK,SAC+B,QAA9B5E,EAAkBwB,QACpB3F,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK3D,IAAIC,EAAKzE,GAASD,KAAK2E,KAAO,EAAI3E,KAAK2E,KAAO,MAExFrD,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK1D,IAAID,EAAKxE,GAASD,KAAK2E,KAAO,EAAI3E,KAAK2E,KAAO,MAG1FwC,EAAEkD,iBACF,MAEF,IAAK,WAC+B,QAA9B5E,EAAkBwB,QACpB3F,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK1D,IAAID,EAAKxE,GAASD,KAAK2E,KAAO,EAAI3E,KAAK2E,KAAO,MAExFrD,EAAAtB,KAAI+E,EAAA,IAAA+E,GAAanE,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK3D,IAAIC,EAAKzE,GAASD,KAAK2E,KAAO,EAAI3E,KAAK2E,KAAO,MAE1FwC,EAAEkD,iBACF,MAEF,IAAK,OACL,IAAK,YACL,IAAK,OACL,IAAK,YAC+B,QAA9B5E,EAAkBwB,QACpB3F,EAAAtB,cAAiB2F,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK1D,IAAID,EAAKxE,EAAQD,KAAK2E,OAEhErD,EAAAtB,cAAiB2F,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK3D,IAAIC,EAAKzE,EAAQD,KAAK2E,OAGlEwC,EAAEkD,iBAEF,MAEF,IAAK,KACL,IAAK,UACL,IAAK,QACL,IAAK,aAC+B,QAA9B5E,EAAkBwB,QACpB3F,EAAAtB,cAAiB2F,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK3D,IAAIC,EAAKzE,EAAQD,KAAK2E,OAEhErD,EAAAtB,cAAiB2F,KAAjB3F,KAAkBsB,EAAAtB,KAAImE,EAAA,KAAeiE,KAAK1D,IAAID,EAAKxE,EAAQD,KAAK2E,OAGlEwC,EAAEkD,iBACF,MAEF,IAAK,IACHlD,EAAEkD,iBAGR,aAGalD,GACX,MAAMmD,EAAcnD,EAAEwC,eAAeC,KAAM3D,GAAMA,aAAa3G,GAC1DgL,GACFhJ,EAAAtB,KAAI+E,EAAA,IAAAwF,IAAa5E,KAAjB3F,KAAkBsK,EAEtB,aAGmBnD,GACjBA,EAAEqD,kBACFlJ,EAAAtB,KAAI+E,EAAA,IAAA6C,GAAcjC,KAAlB3F,MACAsB,EAAAtB,KAAI+E,EAAA,IAAAC,GAAkBW,KAAtB3F,KACF,EAGa8J,EAAA,SAAA1E,EAA8BnF,EAAewK,GAAU,GAC9DrF,EAAMnF,QAAUA,GAEhBmF,EAAMnE,cAAc,IAAIC,MAAM,cAAe,CAAEC,SAAS,EAAMuJ,YAAY,OACxED,IAAYE,MACdC,EAAe5K,KAAM,eACrBoF,EAAMyF,iBACJ,gBACA,KACEzF,EAAMqC,MAAMyC,WAAa,GACzBD,EAAkBjK,KAAM,gBAE1B,CAAE8K,MAAM,IAEV1F,EAAMqC,MAAMyC,WAAa,aAAatI,EAAYK,OAAO8I,OAAOC,eAElE1J,EAAAtB,KAAIgE,EAAA,KAAgBiH,IAAI7F,GACxBA,EAAMnF,MAAQA,EACdmF,EAAM8F,cACN9F,EAAM+F,gBACN/F,EAAMnE,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,KAEtD,cAGaiE,GACP9D,EAAAtB,KAAIgE,EAAA,KAAgBhD,IAAIoE,KAC1BA,EAAMnE,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,KACnDG,EAAAtB,KAAIgE,EAAA,KAAgBoH,OAAOhG,GAE/B,EArvBgBzB,GAAAjC,OAAyBC,CAAG,kfAiBmCC,EAAYC,MAAMC,OAAOuJ,iHAGhGzJ,EAAYC,MAAMC,OAAOuJ,uGAIzBzJ,EAAYC,MAAMC,OAAOwJ,6KAK8C1J,EAAYC,MAAMC,OAAOwJ,+GAGhG1J,EAAYC,MAAMC,OAAOwJ,qGAIzB1J,EAAYC,MAAMC,OAAOuJ,6ZAezBzJ,EAAYC,MAAMC,OAAOyJ,oHAIzB3J,EAAYC,MAAMC,OAAOyJ,yGAIzB3J,EAAYC,MAAMC,OAAO0J,oIAI+C5J,EAAYC,MAAMC,OAAO0J,iHAGjG5J,EAAYC,MAAMC,OAAO0J,uGAIzB5J,EAAYC,MAAMC,OAAOyJ,8SAU8C3J,EAAYC,MAAMC,OAAO2J,iHAGhG7J,EAAYC,MAAMC,OAAO2J,uGAIzB7J,EAAYC,MAAMC,OAAO4J,iIAI8C9J,EAAYC,MAAMC,OAAO4J,+GAGhG9J,EAAYC,MAAMC,OAAO4J,qGAIzB9J,EAAYC,MAAMC,OAAO2J,oUAYzB7J,EAAYC,MAAMC,OAAO6J,6HAIzB/J,EAAYC,MAAMC,OAAO6J,kHAIzB/J,EAAYC,MAAMC,OAAO8J,mJAMzBhK,EAAYC,MAAMC,OAAO8J,2HAIzBhK,EAAYC,MAAMC,OAAO8J,gHAIzBhK,EAAYC,MAAMC,OAAO6J,2UASf3J,EAAU,uBAAuBJ,EAAYK,OAAO8I,OAAOC,+BAC/DpJ,EAAYK,OAAO8I,OAAOC,m4CAsDUpJ,EAAYC,MAAMC,OAAOC,+GAGZH,EAAYU,MAAMuJ,oJAKzBjK,EAAYU,MAAMY,sLAMbtB,EAAYU,MAAMW,qIAKzBrB,EAAYU,MAAMY,kLAMZtB,EAAYU,MAAMwJ,iHAGTlK,EAAYU,MAAME,yHAGzBZ,EAAYU,MAAMyJ,gIAGTnK,EAAYU,MAAMY,oiCAiDxDC,EAAA,CAAhCC,EAAM,UAA8CO,GAAAN,UAAA,gBAGpCF,EAAA,CAAhB6I,KAAyErI,GAAAN,UAAA,iBAkB7CF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAyCE,GAAAN,UAAA,YAAA,GAMlBF,EAAA,CAA3CG,EAAS,CAAEC,KAAM0I,QAASxI,SAAS,KAAyBE,GAAAN,UAAA,gBAAA,GAMjBF,EAAA,CAA3CG,EAAS,CAAEC,KAAM0I,QAASxI,SAAS,KAAyBE,GAAAN,UAAA,gBAAA,GAMjCF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAkBG,GAAAN,UAAA,WAAA,GAMRF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAoBG,GAAAN,UAAA,WAAA,GAMVF,EAAA,CAA3BG,EAAS,CAAEC,KAAMC,UAAmBG,GAAAN,UAAA,YAAA,GAMRF,EAAA,CAA5BG,EAAS,CAAEC,KAAM0I,WAA4BtI,GAAAN,UAAA,gBAAA,GAGdF,EAAA,CAA/BG,EAAS,CAAE4I,WAAW,KAAuEvI,GAAAN,UAAA,mBAAA,GArVnFM,GAAgBR,EAAA,CAD5BO,EAAc,eACFC"}

package/dist/snackbar.js

@@ -131,7 +131,7 @@ _M3eSnackbarElement_handleBeforeToggle = function _M3eSnackbarElement_handleBefo
   registerStyleSheet(css`m3e-snackbar { margin-inline: auto; }`);
 })();
 /** The styles of the element. */
-M3eSnackbarElement.styles = css`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eSnackbarElement.styles = css`:host { contain: layout style paint; position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scaleY(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scaleY(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${DesignToken.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`;

package/dist/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\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-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-snackbar {\r\n        margin-inline: auto;\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scaleY(0.8);\r\n      transform-origin: bottom;\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scaleY(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scaleY(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[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 M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[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-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
+{"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\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-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-snackbar {\r\n        margin-inline: auto;\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      contain: layout style paint;\r\n      position: fixed;\r\n      top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n      max-width: var(--m3e-snackbar-max-width, 42rem);\r\n      visibility: hidden;\r\n      border: none;\r\n      margin: 0;\r\n      padding: 0;\r\n      opacity: 0;\r\n      transform: scaleY(0.8);\r\n      transform-origin: bottom;\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:popover-open) {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: scaleY(1);\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n        transform: scaleY(0.8);\r\n      }\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      flex: 1 1 auto;\r\n      box-sizing: border-box;\r\n      padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n      border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n      font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-snackbar-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-snackbar-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.label.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-snackbar-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.label.large.tracking}\r\n      );\r\n      color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n      --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n      --m3e-text-button-hover-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-label-text-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-text-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-action-text-color,\r\n        ${DesignToken.color.inversePrimary}\r\n      );\r\n      --m3e-standard-icon-button-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-hover-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-focus-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-icon-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n      --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n        --m3e-snackbar-close-icon-color,\r\n        ${DesignToken.color.inverseOnSurface}\r\n      );\r\n    }\r\n    :host([dismissible]) .base {\r\n      padding-inline-end: 0.5rem;\r\n    }\r\n    .supporting-text {\r\n      flex: 1 1 auto;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n      margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        border-radius: ${DesignToken.shape.corner.small};\r\n        box-sizing: border-box;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n  /** @private */ #timeoutId = -1;\r\n  /** @private */ #actionTaken = false;\r\n  /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n  /** The currently open snackbar. */\r\n  static get current(): M3eSnackbarElement | null {\r\n    return M3eSnackbarElement.__current;\r\n  }\r\n\r\n  /**\r\n   * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n   * @default 3000\r\n   */\r\n  @property({ type: Number }) duration = 3000;\r\n\r\n  /**\r\n   * The label of the snackbar's action.\r\n   * @default \"\"\r\n   */\r\n  @property() action = \"\";\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the snackbar.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the snackbar.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /** Whether the user clicked the action. */\r\n  get isActionTaken(): boolean {\r\n    return this.#actionTaken;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.ariaLive = \"polite\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render() {\r\n    return html`<div class=\"base\">\r\n      <span class=\"supporting-text\"><slot></slot></span>\r\n      ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    // After render, compute the (unscaled) height of the snackbar in order\r\n    // to properly position it relative to the viewport.\r\n    // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n    this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n  }\r\n\r\n  /** @private */\r\n  #renderActionButton(): unknown {\r\n    return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionClick(): void {\r\n    this.#actionTaken = true;\r\n    this.hidePopover();\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    if (e.newState == \"open\") {\r\n      M3eSnackbarElement.__current?.hidePopover();\r\n      M3eSnackbarElement.__current = this;\r\n\r\n      if (this.duration > 0) {\r\n        this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n      }\r\n    } else {\r\n      if (M3eSnackbarElement.__current === this) {\r\n        M3eSnackbarElement.__current = null;\r\n      }\r\n\r\n      clearTimeout(this.#timeoutId);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n  addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[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 M3eSnackbarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[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-snackbar\": M3eSnackbarElement;\r\n  }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n  /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n  duration?: number;\r\n\r\n  /** The accessible label given to the close button used to dismiss the snackbar. */\r\n  closeLabel?: string;\r\n\r\n  /** The callback function invoked when the action is clicked. */\r\n  actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n *   actionCallback: () => {\r\n *     // Undo logic here\r\n *   },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n  /**\r\n   * Opens a snackbar with a message.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and action.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message, action and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {string} action The label for the snackbar action.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  /**\r\n   * Opens a snackbar with a message and optional close affordance.\r\n   * @param {string} message The message to show in the snackbar.\r\n   * @param {boolean} dismissible Whether to present close affordance.\r\n   * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n   */\r\n  static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n  static open(\r\n    message: string,\r\n    actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n    dismissibleOrOptions?: boolean | SnackbarOptions,\r\n    options?: SnackbarOptions,\r\n  ): void {\r\n    if (isServer) return;\r\n\r\n    const snackbar = document.createElement(\"m3e-snackbar\");\r\n    snackbar.append(document.createTextNode(message));\r\n\r\n    let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n    if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n      snackbar.action = actionOrDismissibleOrOptions;\r\n    } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = actionOrDismissibleOrOptions;\r\n    } else {\r\n      actualOptions = actionOrDismissibleOrOptions;\r\n    }\r\n\r\n    if (typeof dismissibleOrOptions == \"boolean\") {\r\n      snackbar.dismissible = dismissibleOrOptions;\r\n    } else {\r\n      actualOptions = dismissibleOrOptions;\r\n    }\r\n\r\n    if (options) {\r\n      actualOptions = options;\r\n    }\r\n\r\n    if (actualOptions?.duration !== undefined) {\r\n      snackbar.duration = actualOptions.duration;\r\n    }\r\n    if (actualOptions?.closeLabel) {\r\n      snackbar.closeLabel = actualOptions.closeLabel;\r\n    }\r\n\r\n    snackbar.addEventListener(\"toggle\", (e) => {\r\n      if (e.newState === \"closed\") {\r\n        if (prefersReducedMotion()) {\r\n          snackbar.remove();\r\n        } else {\r\n          snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n        }\r\n\r\n        if (snackbar.isActionTaken) {\r\n          actualOptions?.actionCallback?.();\r\n        }\r\n      }\r\n    });\r\n\r\n    (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n    snackbar.showPopover();\r\n  }\r\n\r\n  /** Dismisses the currently visible snackbar. */\r\n  static dismiss(): void {\r\n    M3eSnackbarElement.current?.hidePopover();\r\n  }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n  /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n  var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}