@m3e/web 2.2.0 → 2.2.1

package/dist/search.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{unsafeCSS as i,css as s,LitElement as n,html as a,nothing as r,svg as l}from"lit";import{property as c,state as h,query as d}from"lit/decorators.js";import{DesignToken as p,EventAttribute as m,AttachInternals as u,setCustomState as v,hasAssignedNodes as g,registerStyleSheet as f,customElement as b,ScrollLockController as w,InertController as $,FocusController as y,prefersReducedMotion as k,debounce as x}from"@m3e/web/core";import"@m3e/web/icon-button";import{ifDefined as E}from"lit/directives/if-defined.js";import{positionAnchor as M}from"@m3e/web/core/anchoring";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as L,Breakpoint as S}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";const z=i(`var(--m3e-search-bar-container-color, ${p.color.surfaceContainerHigh})`),W=i(`var(--m3e-search-bar-leading-icon-color, ${p.color.onSurface})`),C=i(`var(--m3e-search-bar-trailing-icon-color, ${p.color.onSurfaceVariant})`),T=i("var(--m3e-search-bar-container-height, 3.5rem)"),q=i(`var(--m3e-search-bar-container-shape, ${p.shape.corner.full})`),B=i("var(--m3e-search-bar-icon-size, 1.5rem)"),H=i(`var(--m3e-search-bar-supporting-text-color, ${p.color.onSurfaceVariant})`),P=i(`var(--m3e-search-bar-supporting-text-font-size, ${p.typescale.standard.body.large.fontSize})`),X=i(`var(--m3e-search-bar-supporting-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),Z=i(`var(--m3e-search-bar-supporting-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),j=i(`var(--m3e-search-bar-supporting-text-tracking, ${p.typescale.standard.body.large.tracking})`),I=i(`var(--m3e-search-bar-input-color, ${p.color.onSurface})`),K=i(`var(--m3e-search-bar-input-text-font-size, ${p.typescale.standard.body.large.fontSize})`),F=i(`var(--m3e-search-bar-input-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),R=i(`var(--m3e-search-bar-input-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),Y=i(`var(--m3e-search-bar-input-text-tracking, ${p.typescale.standard.body.large.tracking})`),D=i("var(--m3e-search-bar-leading-space, 0.25rem)"),U=i("var(--m3e-search-bar-trailing-space, 0.25rem)"),V=i("var(--m3e-search-bar-no-actions-leading-space, 1rem)"),A=i("var(--m3e-search-bar-no-actions-trailing-space, 1rem)"),G=i("var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)"),J=i("var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)"),N=i("var(--m3e-search-bar-actions-gap, 0px)"),O=s`m3e-search-bar input[slot="input"]::placeholder { user-select: none; color: ${H}; font-size: ${P}; font-weight: ${X}; line-height: ${Z}; letter-spacing: ${j}; }`,Q=s`:host { display: block; height: ${T}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${q}; background-color: ${z}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${N}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${I}; font-size: ${K}; font-weight: ${F}; line-height: ${R}; letter-spacing: ${Y}; } :host(:state(-with-leading)) .base { padding-inline-start: ${D}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${V}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${U}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${A}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${G}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${J}; } slot[name="leading"] { color: ${W}; --m3e-icon-color: ${W}; --m3e-icon-button-icon-color: ${W}; --m3e-icon-size: ${B}; } slot[name="trailing"], .clear { color: ${C}; --m3e-icon-color: ${C}; --m3e-icon-button-icon-color: ${C}; --m3e-icon-size: ${B}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${B}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${B} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${B}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`,ee=i(`var(--m3e-search-view-container-color, ${p.color.surfaceContainerHigh})`),te=i(`var(--m3e-search-view-contained-container-color, ${p.color.surfaceContainerLow})`),oe=i(`var(--m3e-search-view-divider-color, ${p.color.outline})`),ie=i("var(--m3e-search-view-divider-thickness, 1px)"),se=i(`var(--m3e-search-view-full-screen-container-shape, ${p.shape.corner.none})`),ne=i("var(--m3e-search-view-full-screen-header-container-height, 4.5rem)"),ae=i(`var(--m3e-search-view-docked-container-shape, ${p.shape.corner.extraLarge})`),re=i("var(--m3e-search-view-docked-header-container-height, 3.5rem)"),le=i("var(--m3e-search-view-contained-leading-margin, 1.5rem)"),ce=i("var(--m3e-search-view-contained-trailing-margin, 1.55rem)"),he=i("var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)"),de=i("var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)"),pe=i("var(--m3e-search-view-contained-docked-bar-results-gap, 2px)"),me=(i(`var(--m3e-search-view-contained-docked-results-shape, ${p.shape.corner.medium})`),i(`var(--m3e-search-view-contained-docked-bar-shape, ${p.shape.corner.full})`),i("var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)")),ue=i("var(--m3e-search-view-docked-container-min-height, 240px)"),ve=i("var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))"),ge=i("var(--m3e-search-view-contained-docked-results-space, 0.25rem)"),fe=i("var(--m3e-search-view-docked-results-bottom-space, 1rem)"),be=i(`var(--m3e-search-view-docked-scrim-color, ${p.color.scrim})`),we=i("var(--m3e-search-view-docked-scrim-opacity, 32%)"),$e=s`m3e-search-view input[slot="input"]::placeholder { user-select: none; color: ${H}; font-size: ${P}; font-weight: ${X}; line-height: ${Z}; letter-spacing: ${j}; }`,ye=s`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${i(`margin ${p.motion.duration.short2} ${p.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${le}; margin-inline-end: ${ce}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${he}; margin-inline-end: ${de}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${B} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${p.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${B} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${B}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${ne}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${me}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${me}; } :host(:state(-fullscreen)) .anchor { height: ${me}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${se}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${te}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${ee}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${re}; } :host(:not([contained])[open]) .results { border-top-width: ${ie}; border-top-style: solid; border-top-color: ${oe}; } :host(:state(-docked)[contained]) .results { margin-top: ${pe}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${ee}; --m3e-search-bar-container-color: ${ee}; } :host(:state(-docked)[contained]) .results { background-color: ${ee}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${ae}; } :host(:state(-docked)) .results { min-height: calc(${ue} - ${re}); max-height: calc(${ve} - ${re}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${p.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${fe}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${ge}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${i(`transform ${p.motion.duration.short2} ${p.motion.easing.standard},\n      overlay ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete,\n      display ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${i(`border-radius ${p.motion.duration.long2} ${p.motion.easing.standard},\n      background-color ${p.motion.duration.long2} ${p.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${i(`background-color ${p.motion.duration.short3} ${p.motion.easing.standard}, \n        overlay ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete,\n        visibility ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${be} ${we}, transparent ); transition: ${i(`background-color ${p.motion.duration.long2} ${p.motion.easing.standard}, \n        overlay ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete,\n        visibility ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;var ke,xe,Ee,Me,_e,Le,Se,ze,We,Ce;let Te=class extends(m(u(n),"clear")){constructor(){super(...arguments),ke.add(this),xe.set(this,void 0),Ee.set(this,()=>e(this,ke,"m",We).call(this)),this.clearable=!1,this.clearLabel="Clear"}clear(){e(this,xe,"f")&&(e(this,xe,"f").value="",e(this,ke,"m",We).call(this),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}render(){return a`<div class="base" @click="${e(this,ke,"m",_e)}"><slot name="leading" @slotchange="${e(this,ke,"m",Le)}"></slot><slot name="input" @slotchange="${e(this,ke,"m",ze)}"></slot>${e(this,ke,"m",Me).call(this)}<slot name="trailing" @slotchange="${e(this,ke,"m",Se)}"></slot></div>`}};var qe,Be,He,Pe,Xe,Ze,je,Ie,Ke,Fe,Re,Ye,De,Ue,Ve,Ae,Ge,Je,Ne,Oe,Qe,et,tt,ot,it,st,nt,at,rt,lt,ct;xe=new WeakMap,Ee=new WeakMap,ke=new WeakSet,Me=function(){return this.clearable?a`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${e(this,ke,"m",Ce)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button></div>`:r},_e=function(){this.matches(":focus-within")||e(this,xe,"f")?.focus()},Le=function(e){v(this,"-with-leading",g(e.target))},Se=function(e){v(this,"-with-trailing",g(e.target))},ze=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,xe,"f")&&(e(this,xe,"f")?.removeEventListener("input",e(this,Ee,"f")),t(this,xe,i,"f"),e(this,xe,"f")?.addEventListener("input",e(this,Ee,"f")),e(this,xe,"f")&&(e(this,xe,"f").role=e(this,xe,"f").role||"searchbox",e(this,xe,"f").inputMode=e(this,xe,"f").inputMode||"search",e(this,xe,"f").type="text"),e(this,ke,"m",We).call(this))},We=function(){v(this,"-clearable",this.clearable&&(e(this,xe,"f")?.value??"").length>0)},Ce=function(){this.clear(),e(this,xe,"f")?.focus()},f(O),Te.styles=Q,o([c({type:Boolean,reflect:!0})],Te.prototype,"clearable",void 0),o([c({attribute:"clear-label"})],Te.prototype,"clearLabel",void 0),Te=o([b("m3e-search-bar")],Te);let ht=class extends(m(u(n),"clear","query")){constructor(){super(),qe.add(this),Be.set(this,void 0),He.set(this,!1),Pe.set(this,()=>e(this,qe,"m",Je).call(this)),Xe.set(this,()=>e(this,qe,"m",Qe).call(this)),Ze.set(this,t=>e(this,qe,"m",it).call(this,t)),je.set(this,()=>e(this,qe,"m",ot).call(this)),Ie.set(this,new w(this)),Ke.set(this,new $(this)),this._clearable=!1,Fe.set(this,void 0),Re.set(this,void 0),Ye.set(this,void 0),this.contained=!1,this.mode="docked",this.open=!1,this.clearLabel="Clear",this.closeLabel="Close",this.hideSearchIcon=!1,new y(this,{callback:e=>this._handleFocusChange(e)})}get currentMode(){return this._mode??("fullscreen"!==this.mode?"docked":"fullscreen")}set currentMode(e){this._mode=e}clear(){e(this,Be,"f")&&(e(this,Be,"f").value="",e(this,qe,"m",Oe).call(this),this.dispatchEvent(new CustomEvent("query",{detail:{term:""},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}willUpdate(o){if(super.willUpdate(o),o.has("mode")){e(this,Ye,"f")?.call(this);const i=o.get("mode");i&&i!==this.mode&&this.open&&(this.open=!1),"auto"===this.mode?t(this,Ye,L.observe([S.XSmall],t=>{const o=this.currentMode;this._mode=t.get(S.XSmall)?"fullscreen":"docked",o!==this._mode&&this.open&&(this.open=!1),e(this,qe,"m",Ne).call(this)}),"f"):(this._mode=void 0,e(this,qe,"m",Ne).call(this))}o.has("_mode")&&e(this,qe,"m",Ne).call(this)}updated(t){super.updated(t),t.has("open")&&(this.open?"fullscreen"===this.currentMode?e(this,qe,"m",lt).call(this):e(this,qe,"m",nt).call(this):"fullscreen"===(e(this,Fe,"f")??this.currentMode)?e(this,qe,"m",ct).call(this):e(this,qe,"m",at).call(this))}render(){return a`<div class="base"><div class="anchor"></div><div role="${E(this.open?"dialog":void 0)}" aria-modal="${E(this.open?"true":void 0)}" aria-labelledby="${E(this.open?"header":void 0)}" class="view" tabindex="-1" @keydown="${e(this,qe,"m",st)}"><m3e-focus-trap ?disabled="${!this.open}"><div class="header" id="header"><m3e-search-bar class="bar">${e(this,qe,"m",De).call(this)} ${this.open?a`<slot name="open-leading" slot="leading"></slot>`:a`<slot name="closed-leading" slot="leading"></slot>`}<slot name="input" slot="input" @slotchange="${e(this,qe,"m",Ge)}"></slot>${e(this,qe,"m",Ae).call(this)} ${this.open?a`<slot name="open-trailing" slot="trailing"></slot>`:a`<slot name="closed-trailing" slot="trailing"></slot>`}</m3e-search-bar></div><div class="results"><div class="scroll-container"><slot></slot></div></div></m3e-focus-trap></div></div>`}_handleFocusChange(e){e||"docked"!==this.currentMode||(this.clear(),this.open=!1)}};Be=new WeakMap,He=new WeakMap,Pe=new WeakMap,Xe=new WeakMap,Ze=new WeakMap,je=new WeakMap,Ie=new WeakMap,Ke=new WeakMap,Fe=new WeakMap,Re=new WeakMap,Ye=new WeakMap,qe=new WeakSet,De=function(){return!this.open&&this.hideSearchIcon?r:a`<div class="icon" slot="leading">${this.open?e(this,qe,"m",Ve).call(this):e(this,qe,"m",Ue).call(this)}</div>`},Ue=function(){return a`<slot name="search-icon"><svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></slot>`},Ve=function(){return a`<m3e-icon-button class="close" slot="leading" aria-label="${this.closeLabel}" @click="${e(this,qe,"m",et)}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">${"docked"===this.currentMode?l`<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>`:l`<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>`}</svg></slot></m3e-icon-button>`},Ae=function(){return a`<m3e-icon-button class="clear" slot="trailing" aria-label="${this.open&&!this._clearable?this.closeLabel:this.clearLabel}" @click="${e(this,qe,"m",tt)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button>`},Ge=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,Be,"f")&&(e(this,Be,"f")?.removeEventListener("input",e(this,Pe,"f")),e(this,Be,"f")?.removeEventListener("focus",e(this,Xe,"f")),e(this,Be,"f")?.removeEventListener("keydown",e(this,Ze,"f")),e(this,Be,"f")?.removeEventListener("pointerdown",e(this,je,"f")),t(this,Be,i,"f"),e(this,Be,"f")?.addEventListener("input",e(this,Pe,"f")),e(this,Be,"f")?.addEventListener("focus",e(this,Xe,"f")),e(this,Be,"f")?.addEventListener("keydown",e(this,Ze,"f")),e(this,Be,"f")?.addEventListener("pointerdown",e(this,je,"f")),e(this,Be,"f")&&(e(this,Be,"f").role=e(this,Be,"f").role||"searchbox",e(this,Be,"f").inputMode=e(this,Be,"f").inputMode||"search",e(this,Be,"f").type="text",e(this,Be,"f").ariaHasPopup="dialog"),e(this,qe,"m",Oe).call(this))},Je=function(){e(this,qe,"m",Oe).call(this),this.open?this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0})):this.open=!0},Ne=function(){v(this,"-fullscreen","fullscreen"===this.currentMode),v(this,"-docked","docked"===this.currentMode)},Oe=function(){this._clearable=(e(this,Be,"f")?.value??"").length>0,v(this,"-clearable",this._clearable)},Qe=function(){this.open=!e(this,He,"f"),t(this,He,!1,"f")},et=function(){e(this,Be,"f")&&(e(this,Be,"f").value&&this.clear(),t(this,He,!0,"f"),e(this,Be,"f")?.focus())},tt=function(){e(this,Be,"f")&&(e(this,Be,"f").value?this.clear():t(this,He,!0,"f"),e(this,Be,"f")?.focus())},ot=function(){!this.open&&e(this,Be,"f")?.matches(":focus")&&(this.open=!0)},it=function(e){if(this.open&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey){e.preventDefault();e.target.value&&this.clear(),this.open=!1}},st=function(t){!this.open||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),e(this,qe,"m",et).call(this))},nt=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Fe,this.currentMode,"f");const o=this._view;e(this,Re,"f")?.call(this),t(this,Re,await M(o,this._anchor,{position:"bottom"},(e,t)=>{const o=this._view;o.style.top=t-this._anchor.clientHeight+"px",o.style.width=`${this._anchor.clientWidth}px`,"rtl"===_.current?(o.style.right=window.innerWidth-e-this.clientWidth+"px",o.style.left=""):(o.style.left=`${e}px`,o.style.right="")}),"f"),this._anchor.style.position="relative",o.popover="manual",o.style.position="absolute",o.showPopover(),e(this,Ie,"f").lock(),e(this,Ke,"f").lock(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0}))},at=function(){const o=this._view;"manual"===o.popover&&(this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0}))?(t(this,Fe,void 0,"f"),e(this,Ie,"f").unlock(),e(this,Ke,"f").unlock(),k()?e(this,qe,"m",rt).call(this):(o.classList.add("closing"),o.addEventListener("transitionend",()=>e(this,qe,"m",rt).call(this),{once:!0}))):this.open=!0)},rt=function(){e(this,Re,"f")?.call(this),t(this,Re,void 0,"f");const o=this._view;o.classList.remove("closing"),o.style.position="",o.style.width="",o.style.top="",o.style.left="",o.style.right="",o.hidePopover(),o.popover=null,this._anchor.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},lt=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Fe,this.currentMode,"f"),e(this,Ie,"f").lock(),e(this,Ke,"f").lock();const o=this._view;if(e(this,Re,"f")?.call(this),k())o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative";else{const e=o.getBoundingClientRect(),t="rtl"===_.current?window.innerWidth-e.right:e.left;o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative",o.animate([{transform:`translateX(${t}px)`,width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:"translateX(0px)",width:"100vw",top:"0px",height:"100vh"}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"})}this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0}))},ct=async function(){const o=this._view;if("manual"!==o.popover)return;if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!0);t(this,Fe,void 0,"f"),e(this,Ie,"f").unlock(),e(this,Ke,"f").unlock();const i=this._anchor;if(!k()){const e=o.getBoundingClientRect(),t=i.getBoundingClientRect(),s="rtl"===_.current?window.innerWidth-e.right:e.left,n="rtl"===_.current?window.innerWidth-t.right:t.left,a="rtl"===_.current?s-n:n-s;o.classList.add("closing"),await o.animate([{transform:"translateX(0px)",width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:`translateX(${a}px)`,width:`${t.width}px`,top:`${t.top}px`,height:`${t.height}px`}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}).finished}o.hidePopover(),o.style.position="",o.popover=null,o.classList.remove("closing"),i.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},f($e),ht.styles=ye,o([h()],ht.prototype,"_clearable",void 0),o([h()],ht.prototype,"_mode",void 0),o([d(".anchor")],ht.prototype,"_anchor",void 0),o([d(".view")],ht.prototype,"_view",void 0),o([c({type:Boolean,reflect:!0})],ht.prototype,"contained",void 0),o([c({reflect:!0})],ht.prototype,"mode",void 0),o([c({type:Boolean,reflect:!0})],ht.prototype,"open",void 0),o([c({attribute:"clear-label"})],ht.prototype,"clearLabel",void 0),o([c({attribute:"close-label"})],ht.prototype,"closeLabel",void 0),o([c({attribute:"hide-search-icon",type:Boolean})],ht.prototype,"hideSearchIcon",void 0),o([x(40)],ht.prototype,"_handleFocusChange",null),ht=o([b("m3e-search-view")],ht);export{Te as M3eSearchBarElement,ht as M3eSearchViewElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{unsafeCSS as i,css as s,LitElement as n,html as a,nothing as r,svg as l}from"lit";import{property as c,state as h,query as d}from"lit/decorators.js";import{DesignToken as p,EventAttribute as m,AttachInternals as u,setCustomState as v,hasAssignedNodes as g,registerStyleSheet as f,customElement as b,ReconnectedCallback as w,ScrollLockController as $,InertController as k,FocusController as y,prefersReducedMotion as x,debounce as E}from"@m3e/web/core";import"@m3e/web/icon-button";import{ifDefined as _}from"lit/directives/if-defined.js";import{positionAnchor as M}from"@m3e/web/core/anchoring";import{M3eDirectionality as L}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as S,Breakpoint as C}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";const z=i(`var(--m3e-search-bar-container-color, ${p.color.surfaceContainerHigh})`),W=i(`var(--m3e-search-bar-leading-icon-color, ${p.color.onSurface})`),T=i(`var(--m3e-search-bar-trailing-icon-color, ${p.color.onSurfaceVariant})`),q=i("var(--m3e-search-bar-container-height, 3.5rem)"),B=i(`var(--m3e-search-bar-container-shape, ${p.shape.corner.full})`),H=i("var(--m3e-search-bar-icon-size, 1.5rem)"),P=i(`var(--m3e-search-bar-supporting-text-color, ${p.color.onSurfaceVariant})`),X=i(`var(--m3e-search-bar-supporting-text-font-size, ${p.typescale.standard.body.large.fontSize})`),Z=i(`var(--m3e-search-bar-supporting-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),j=i(`var(--m3e-search-bar-supporting-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),I=i(`var(--m3e-search-bar-supporting-text-tracking, ${p.typescale.standard.body.large.tracking})`),K=i(`var(--m3e-search-bar-input-color, ${p.color.onSurface})`),F=i(`var(--m3e-search-bar-input-text-font-size, ${p.typescale.standard.body.large.fontSize})`),R=i(`var(--m3e-search-bar-input-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),Y=i(`var(--m3e-search-bar-input-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),D=i(`var(--m3e-search-bar-input-text-tracking, ${p.typescale.standard.body.large.tracking})`),U=i("var(--m3e-search-bar-leading-space, 0.25rem)"),V=i("var(--m3e-search-bar-trailing-space, 0.25rem)"),A=i("var(--m3e-search-bar-no-actions-leading-space, 1rem)"),G=i("var(--m3e-search-bar-no-actions-trailing-space, 1rem)"),J=i("var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)"),N=i("var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)"),O=i("var(--m3e-search-bar-actions-gap, 0px)"),Q=s`m3e-search-bar input[slot="input"]::placeholder { user-select: none; color: ${P}; font-size: ${X}; font-weight: ${Z}; line-height: ${j}; letter-spacing: ${I}; }`,ee=s`:host { display: block; height: ${q}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${B}; background-color: ${z}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${O}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${K}; font-size: ${F}; font-weight: ${R}; line-height: ${Y}; letter-spacing: ${D}; } :host(:state(-with-leading)) .base { padding-inline-start: ${U}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${A}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${V}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${G}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${J}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${N}; } slot[name="leading"] { color: ${W}; --m3e-icon-color: ${W}; --m3e-icon-button-icon-color: ${W}; --m3e-icon-size: ${H}; } slot[name="trailing"], .clear { color: ${T}; --m3e-icon-color: ${T}; --m3e-icon-button-icon-color: ${T}; --m3e-icon-size: ${H}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${H}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${H} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${H}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`,te=i(`var(--m3e-search-view-container-color, ${p.color.surfaceContainerHigh})`),oe=i(`var(--m3e-search-view-contained-container-color, ${p.color.surfaceContainerLow})`),ie=i(`var(--m3e-search-view-divider-color, ${p.color.outline})`),se=i("var(--m3e-search-view-divider-thickness, 1px)"),ne=i(`var(--m3e-search-view-full-screen-container-shape, ${p.shape.corner.none})`),ae=i("var(--m3e-search-view-full-screen-header-container-height, 4.5rem)"),re=i(`var(--m3e-search-view-docked-container-shape, ${p.shape.corner.extraLarge})`),le=i("var(--m3e-search-view-docked-header-container-height, 3.5rem)"),ce=i("var(--m3e-search-view-contained-leading-margin, 1.5rem)"),he=i("var(--m3e-search-view-contained-trailing-margin, 1.55rem)"),de=i("var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)"),pe=i("var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)"),me=i("var(--m3e-search-view-contained-docked-bar-results-gap, 2px)"),ue=(i(`var(--m3e-search-view-contained-docked-results-shape, ${p.shape.corner.medium})`),i(`var(--m3e-search-view-contained-docked-bar-shape, ${p.shape.corner.full})`),i("var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)")),ve=i("var(--m3e-search-view-docked-container-min-height, 240px)"),ge=i("var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))"),fe=i("var(--m3e-search-view-contained-docked-results-space, 0.25rem)"),be=i("var(--m3e-search-view-docked-results-bottom-space, 1rem)"),we=i(`var(--m3e-search-view-docked-scrim-color, ${p.color.scrim})`),$e=i("var(--m3e-search-view-docked-scrim-opacity, 32%)"),ke=s`m3e-search-view input[slot="input"]::placeholder { user-select: none; color: ${P}; font-size: ${X}; font-weight: ${Z}; line-height: ${j}; letter-spacing: ${I}; }`,ye=s`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${i(`margin ${p.motion.duration.short2} ${p.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${ce}; margin-inline-end: ${he}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${de}; margin-inline-end: ${pe}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${H} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${p.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${H} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${H}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${ae}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${ue}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${ue}; } :host(:state(-fullscreen)) .anchor { height: ${ue}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${ne}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${oe}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${te}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${le}; } :host(:not([contained])[open]) .results { border-top-width: ${se}; border-top-style: solid; border-top-color: ${ie}; } :host(:state(-docked)[contained]) .results { margin-top: ${me}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${te}; --m3e-search-bar-container-color: ${te}; } :host(:state(-docked)[contained]) .results { background-color: ${te}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${re}; } :host(:state(-docked)) .results { min-height: calc(${ve} - ${le}); max-height: calc(${ge} - ${le}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${p.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${be}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${fe}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${i(`transform ${p.motion.duration.short2} ${p.motion.easing.standard},\n      overlay ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete,\n      display ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${i(`border-radius ${p.motion.duration.long2} ${p.motion.easing.standard},\n      background-color ${p.motion.duration.long2} ${p.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${i(`background-color ${p.motion.duration.short3} ${p.motion.easing.standard}, \n        overlay ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete,\n        visibility ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${we} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${we} ${$e}, transparent ); transition: ${i(`background-color ${p.motion.duration.long2} ${p.motion.easing.standard}, \n        overlay ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete,\n        visibility ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${we} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;var xe,Ee,_e,Me,Le,Se,Ce,ze,We,Te;let qe=class extends(m(u(n),"clear")){constructor(){super(...arguments),xe.add(this),Ee.set(this,void 0),_e.set(this,()=>e(this,xe,"m",We).call(this)),this.clearable=!1,this.clearLabel="Clear"}clear(){e(this,Ee,"f")&&(e(this,Ee,"f").value="",e(this,xe,"m",We).call(this),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}render(){return a`<div class="base" @click="${e(this,xe,"m",Le)}"><slot name="leading" @slotchange="${e(this,xe,"m",Se)}"></slot><slot name="input" @slotchange="${e(this,xe,"m",ze)}"></slot>${e(this,xe,"m",Me).call(this)}<slot name="trailing" @slotchange="${e(this,xe,"m",Ce)}"></slot></div>`}};var Be,He,Pe,Xe,Ze,je,Ie,Ke,Fe,Re,Ye,De,Ue,Ve,Ae,Ge,Je,Ne,Oe,Qe,et,tt,ot,it,st,nt,at,rt,lt,ct,ht,dt;Ee=new WeakMap,_e=new WeakMap,xe=new WeakSet,Me=function(){return this.clearable?a`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${e(this,xe,"m",Te)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button></div>`:r},Le=function(){this.matches(":focus-within")||e(this,Ee,"f")?.focus()},Se=function(e){v(this,"-with-leading",g(e.target))},Ce=function(e){v(this,"-with-trailing",g(e.target))},ze=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,Ee,"f")&&(e(this,Ee,"f")?.removeEventListener("input",e(this,_e,"f")),t(this,Ee,i,"f"),e(this,Ee,"f")?.addEventListener("input",e(this,_e,"f")),e(this,Ee,"f")&&(e(this,Ee,"f").role=e(this,Ee,"f").role||"searchbox",e(this,Ee,"f").inputMode=e(this,Ee,"f").inputMode||"search",e(this,Ee,"f").type="text"),e(this,xe,"m",We).call(this))},We=function(){v(this,"-clearable",this.clearable&&(e(this,Ee,"f")?.value??"").length>0)},Te=function(){this.clear(),e(this,Ee,"f")?.focus()},f(Q),qe.styles=ee,o([c({type:Boolean,reflect:!0})],qe.prototype,"clearable",void 0),o([c({attribute:"clear-label"})],qe.prototype,"clearLabel",void 0),qe=o([b("m3e-search-bar")],qe);let pt=class extends(m(w(u(n)),"clear","query")){constructor(){super(),Be.add(this),He.set(this,void 0),Pe.set(this,!1),Xe.set(this,()=>e(this,Be,"m",Oe).call(this)),Ze.set(this,()=>e(this,Be,"m",tt).call(this)),je.set(this,t=>e(this,Be,"m",nt).call(this,t)),Ie.set(this,()=>e(this,Be,"m",st).call(this)),Ke.set(this,new $(this)),Fe.set(this,new k(this)),this._clearable=!1,Re.set(this,void 0),Ye.set(this,void 0),De.set(this,void 0),this.contained=!1,this.mode="docked",this.open=!1,this.clearLabel="Clear",this.closeLabel="Close",this.hideSearchIcon=!1,new y(this,{callback:e=>this._handleFocusChange(e)})}get currentMode(){return this._mode??("fullscreen"!==this.mode?"docked":"fullscreen")}set currentMode(e){this._mode=e}clear(){e(this,He,"f")&&(e(this,He,"f").value="",e(this,Be,"m",et).call(this),this.dispatchEvent(new CustomEvent("query",{detail:{term:""},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,e(this,De,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,Be,"m",Je).call(this)}willUpdate(t){if(super.willUpdate(t),t.has("mode")){e(this,De,"f")?.call(this);const o=t.get("mode");o&&o!==this.mode&&this.open&&(this.open=!1),"auto"===this.mode?e(this,Be,"m",Je).call(this):(this._mode=void 0,e(this,Be,"m",Qe).call(this))}t.has("_mode")&&e(this,Be,"m",Qe).call(this)}updated(t){super.updated(t),t.has("open")&&(this.open?"fullscreen"===this.currentMode?e(this,Be,"m",ht).call(this):e(this,Be,"m",rt).call(this):"fullscreen"===(e(this,Re,"f")??this.currentMode)?e(this,Be,"m",dt).call(this):e(this,Be,"m",lt).call(this))}render(){return a`<div class="base"><div class="anchor"></div><div role="${_(this.open?"dialog":void 0)}" aria-modal="${_(this.open?"true":void 0)}" aria-labelledby="${_(this.open?"header":void 0)}" class="view" tabindex="-1" @keydown="${e(this,Be,"m",at)}"><m3e-focus-trap ?disabled="${!this.open}"><div class="header" id="header"><m3e-search-bar class="bar">${e(this,Be,"m",Ue).call(this)} ${this.open?a`<slot name="open-leading" slot="leading"></slot>`:a`<slot name="closed-leading" slot="leading"></slot>`}<slot name="input" slot="input" @slotchange="${e(this,Be,"m",Ne)}"></slot>${e(this,Be,"m",Ge).call(this)} ${this.open?a`<slot name="open-trailing" slot="trailing"></slot>`:a`<slot name="closed-trailing" slot="trailing"></slot>`}</m3e-search-bar></div><div class="results"><div class="scroll-container"><slot></slot></div></div></m3e-focus-trap></div></div>`}_handleFocusChange(e){e||"docked"!==this.currentMode||(this.clear(),this.open=!1)}};He=new WeakMap,Pe=new WeakMap,Xe=new WeakMap,Ze=new WeakMap,je=new WeakMap,Ie=new WeakMap,Ke=new WeakMap,Fe=new WeakMap,Re=new WeakMap,Ye=new WeakMap,De=new WeakMap,Be=new WeakSet,Ue=function(){return!this.open&&this.hideSearchIcon?r:a`<div class="icon" slot="leading">${this.open?e(this,Be,"m",Ae).call(this):e(this,Be,"m",Ve).call(this)}</div>`},Ve=function(){return a`<slot name="search-icon"><svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></slot>`},Ae=function(){return a`<m3e-icon-button class="close" slot="leading" aria-label="${this.closeLabel}" @click="${e(this,Be,"m",ot)}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">${"docked"===this.currentMode?l`<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>`:l`<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>`}</svg></slot></m3e-icon-button>`},Ge=function(){return a`<m3e-icon-button class="clear" slot="trailing" aria-label="${this.open&&!this._clearable?this.closeLabel:this.clearLabel}" @click="${e(this,Be,"m",it)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button>`},Je=function(){t(this,De,S.observe([C.XSmall],t=>{const o=this.currentMode;this._mode=t.get(C.XSmall)?"fullscreen":"docked",o!==this._mode&&this.open&&(this.open=!1),e(this,Be,"m",Qe).call(this)}),"f")},Ne=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,He,"f")&&(e(this,He,"f")?.removeEventListener("input",e(this,Xe,"f")),e(this,He,"f")?.removeEventListener("focus",e(this,Ze,"f")),e(this,He,"f")?.removeEventListener("keydown",e(this,je,"f")),e(this,He,"f")?.removeEventListener("pointerdown",e(this,Ie,"f")),t(this,He,i,"f"),e(this,He,"f")?.addEventListener("input",e(this,Xe,"f")),e(this,He,"f")?.addEventListener("focus",e(this,Ze,"f")),e(this,He,"f")?.addEventListener("keydown",e(this,je,"f")),e(this,He,"f")?.addEventListener("pointerdown",e(this,Ie,"f")),e(this,He,"f")&&(e(this,He,"f").role=e(this,He,"f").role||"searchbox",e(this,He,"f").inputMode=e(this,He,"f").inputMode||"search",e(this,He,"f").type="text",e(this,He,"f").ariaHasPopup="dialog"),e(this,Be,"m",et).call(this))},Oe=function(){e(this,Be,"m",et).call(this),this.open?this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,He,"f")?.value??""},bubbles:!0,composed:!0})):this.open=!0},Qe=function(){v(this,"-fullscreen","fullscreen"===this.currentMode),v(this,"-docked","docked"===this.currentMode)},et=function(){this._clearable=(e(this,He,"f")?.value??"").length>0,v(this,"-clearable",this._clearable)},tt=function(){this.open=!e(this,Pe,"f"),t(this,Pe,!1,"f")},ot=function(){e(this,He,"f")&&(e(this,He,"f").value&&this.clear(),t(this,Pe,!0,"f"),e(this,He,"f")?.focus())},it=function(){e(this,He,"f")&&(e(this,He,"f").value?this.clear():t(this,Pe,!0,"f"),e(this,He,"f")?.focus())},st=function(){!this.open&&e(this,He,"f")?.matches(":focus")&&(this.open=!0)},nt=function(e){if(this.open&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey){e.preventDefault();e.target.value&&this.clear(),this.open=!1}},at=function(t){!this.open||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),e(this,Be,"m",ot).call(this))},rt=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Re,this.currentMode,"f");const o=this._view;e(this,Ye,"f")?.call(this),t(this,Ye,await M(o,this._anchor,{position:"bottom"},(e,t)=>{const o=this._view;o.style.top=t-this._anchor.clientHeight+"px",o.style.width=`${this._anchor.clientWidth}px`,"rtl"===L.current?(o.style.right=window.innerWidth-e-this.clientWidth+"px",o.style.left=""):(o.style.left=`${e}px`,o.style.right="")}),"f"),this._anchor.style.position="relative",o.popover="manual",o.style.position="absolute",o.showPopover(),e(this,Ke,"f").lock(),e(this,Fe,"f").lock(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,He,"f")?.value??""},bubbles:!0,composed:!0}))},lt=function(){const o=this._view;"manual"===o.popover&&(this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0}))?(t(this,Re,void 0,"f"),e(this,Ke,"f").unlock(),e(this,Fe,"f").unlock(),x()?e(this,Be,"m",ct).call(this):(o.classList.add("closing"),o.addEventListener("transitionend",()=>e(this,Be,"m",ct).call(this),{once:!0}))):this.open=!0)},ct=function(){e(this,Ye,"f")?.call(this),t(this,Ye,void 0,"f");const o=this._view;o.classList.remove("closing"),o.style.position="",o.style.width="",o.style.top="",o.style.left="",o.style.right="",o.hidePopover(),o.popover=null,this._anchor.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},ht=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Re,this.currentMode,"f"),e(this,Ke,"f").lock(),e(this,Fe,"f").lock();const o=this._view;if(e(this,Ye,"f")?.call(this),x())o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative";else{const e=o.getBoundingClientRect(),t="rtl"===L.current?window.innerWidth-e.right:e.left;o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative",o.animate([{transform:`translateX(${t}px)`,width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:"translateX(0px)",width:"100vw",top:"0px",height:"100vh"}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"})}this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,He,"f")?.value??""},bubbles:!0,composed:!0}))},dt=async function(){const o=this._view;if("manual"!==o.popover)return;if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!0);t(this,Re,void 0,"f"),e(this,Ke,"f").unlock(),e(this,Fe,"f").unlock();const i=this._anchor;if(!x()){const e=o.getBoundingClientRect(),t=i.getBoundingClientRect(),s="rtl"===L.current?window.innerWidth-e.right:e.left,n="rtl"===L.current?window.innerWidth-t.right:t.left,a="rtl"===L.current?s-n:n-s;o.classList.add("closing"),await o.animate([{transform:"translateX(0px)",width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:`translateX(${a}px)`,width:`${t.width}px`,top:`${t.top}px`,height:`${t.height}px`}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}).finished}o.hidePopover(),o.style.position="",o.popover=null,o.classList.remove("closing"),i.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},f(ke),pt.styles=ye,o([h()],pt.prototype,"_clearable",void 0),o([h()],pt.prototype,"_mode",void 0),o([d(".anchor")],pt.prototype,"_anchor",void 0),o([d(".view")],pt.prototype,"_view",void 0),o([c({type:Boolean,reflect:!0})],pt.prototype,"contained",void 0),o([c({reflect:!0})],pt.prototype,"mode",void 0),o([c({type:Boolean,reflect:!0})],pt.prototype,"open",void 0),o([c({attribute:"clear-label"})],pt.prototype,"clearLabel",void 0),o([c({attribute:"close-label"})],pt.prototype,"closeLabel",void 0),o([c({attribute:"hide-search-icon",type:Boolean})],pt.prototype,"hideSearchIcon",void 0),o([E(40)],pt.prototype,"_handleFocusChange",null),pt=o([b("m3e-search-view")],pt);export{qe as M3eSearchBarElement,pt as M3eSearchViewElement};
 //# sourceMappingURL=search.min.js.map

package/dist/search.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.min.js","sources":["../../src/search/styles/SearchBarToken.ts","../../src/search/styles/SearchBarStyle.ts","../../src/search/styles/SearchViewToken.ts","../../src/search/styles/SearchViewStyle.ts","../../src/search/SearchBarElement.ts","../../src/search/SearchViewElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchBarToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-search-bar-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n  leadingIconColor: unsafeCSS(`var(--m3e-search-bar-leading-icon-color, ${DesignToken.color.onSurface})`),\r\n  trailingIconColor: unsafeCSS(`var(--m3e-search-bar-trailing-icon-color, ${DesignToken.color.onSurfaceVariant})`),\r\n  containerHeight: unsafeCSS(\"var(--m3e-search-bar-container-height, 3.5rem)\"),\r\n  containerShape: unsafeCSS(`var(--m3e-search-bar-container-shape, ${DesignToken.shape.corner.full})`),\r\n  iconSize: unsafeCSS(\"var(--m3e-search-bar-icon-size, 1.5rem)\"),\r\n  supportingTextColor: unsafeCSS(`var(--m3e-search-bar-supporting-text-color, ${DesignToken.color.onSurfaceVariant})`),\r\n  supportingTextFontSize: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n  ),\r\n  supportingTextFontWeight: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n  ),\r\n  supportingTextLineHeight: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n  ),\r\n  supportingTextTracking: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n  ),\r\n  inputColor: unsafeCSS(`var(--m3e-search-bar-input-color, ${DesignToken.color.onSurface})`),\r\n  inputTextFontSize: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n  ),\r\n  inputTextFontWeight: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n  ),\r\n  inputTextLineHeight: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n  ),\r\n  inputTextTracking: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n  ),\r\n  leadingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-space, 0.25rem)\"),\r\n  trailingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-space, 0.25rem)\"),\r\n  noActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-leading-space, 1rem)\"),\r\n  noActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-trailing-space, 1rem)\"),\r\n  leadingActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)\"),\r\n  trailingActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)\"),\r\n  actionsGap: unsafeCSS(\"var(--m3e-search-bar-actions-gap, 0px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup } from \"lit\";\r\n\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarLightDomStyle = css`\r\n  m3e-search-bar input[slot=\"input\"]::placeholder {\r\n    user-select: none;\r\n    color: ${SearchBarToken.supportingTextColor};\r\n    font-size: ${SearchBarToken.supportingTextFontSize};\r\n    font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n    line-height: ${SearchBarToken.supportingTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n  }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    height: ${SearchBarToken.containerHeight};\r\n  }\r\n  .base {\r\n    cursor: text;\r\n    display: flex;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: ${SearchBarToken.containerShape};\r\n    background-color: ${SearchBarToken.containerColor};\r\n  }\r\n  .clear {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n  }\r\n  :host(:not(:state(-clearable))) .clear {\r\n    display: none;\r\n  }\r\n  :host(:state(-with-leading)) slot[name=\"leading\"],\r\n  :host(:state(-with-trailing)) slot[name=\"trailing\"] {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n    padding-inline: 0.25rem;\r\n    column-gap: calc(0.5rem + ${SearchBarToken.actionsGap});\r\n  }\r\n  ::slotted([slot=\"input\"]) {\r\n    flex: 1 1 auto;\r\n    outline: unset;\r\n    border: unset;\r\n    background-color: transparent;\r\n    box-shadow: none;\r\n    min-width: 0;\r\n    padding: unset;\r\n    color: ${SearchBarToken.inputColor};\r\n    font-size: ${SearchBarToken.inputTextFontSize};\r\n    font-weight: ${SearchBarToken.inputTextFontWeight};\r\n    line-height: ${SearchBarToken.inputTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.inputTextTracking};\r\n  }\r\n  :host(:state(-with-leading)) .base {\r\n    padding-inline-start: ${SearchBarToken.leadingSpace};\r\n  }\r\n  :host(:not(:state(-with-leading))) .base {\r\n    padding-inline-start: ${SearchBarToken.noActionsLeadingSpace};\r\n  }\r\n  :host(:is(:state(-with-trailing), :state(-clearable))) .base {\r\n    padding-inline-end: ${SearchBarToken.trailingSpace};\r\n  }\r\n  :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base {\r\n    padding-inline-end: ${SearchBarToken.noActionsTrailingSpace};\r\n  }\r\n  :host(:state(-with-leading)) ::slotted([slot=\"input\"]) {\r\n    margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace};\r\n  }\r\n  :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot=\"input\"]) {\r\n    margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace};\r\n  }\r\n  slot[name=\"leading\"] {\r\n    color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  slot[name=\"trailing\"],\r\n  .clear {\r\n    color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  ::slotted(svg[slot=\"leading\"]),\r\n  ::slotted(svg[slot=\"trailing\"]) {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize};\r\n  }\r\n  ::slotted([slot=\"clear-icon\"]),\r\n  .clear-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  slot[name=\"clear-icon\"] {\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchViewToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-search-view-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n  containedContainerColor: unsafeCSS(\r\n    `var(--m3e-search-view-contained-container-color, ${DesignToken.color.surfaceContainerLow})`,\r\n  ),\r\n  dividerColor: unsafeCSS(`var(--m3e-search-view-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(`var(--m3e-search-view-divider-thickness, 1px)`),\r\n  fullScreenContainerShape: unsafeCSS(\r\n    `var(--m3e-search-view-full-screen-container-shape, ${DesignToken.shape.corner.none})`,\r\n  ),\r\n  fullScreenHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-full-screen-header-container-height, 4.5rem)\"),\r\n  dockedContainerShape: unsafeCSS(\r\n    `var(--m3e-search-view-docked-container-shape, ${DesignToken.shape.corner.extraLarge})`,\r\n  ),\r\n  dockedHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-docked-header-container-height, 3.5rem)\"),\r\n  containedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-leading-margin, 1.5rem)\"),\r\n  containedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-trailing-margin, 1.55rem)\"),\r\n  containedFocusedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)\"),\r\n  containedFocusedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)\"),\r\n  containedDockedBarResultsGap: unsafeCSS(\"var(--m3e-search-view-contained-docked-bar-results-gap, 2px)\"),\r\n  containedDockedResultsShape: unsafeCSS(\r\n    `var(--m3e-search-view-contained-docked-results-shape, ${DesignToken.shape.corner.medium})`,\r\n  ),\r\n  containedDockedBarShape: unsafeCSS(\r\n    `var(--m3e-search-view-contained-docked-bar-shape, ${DesignToken.shape.corner.full})`,\r\n  ),\r\n  containedFullScreenBarContainerHeight: unsafeCSS(\r\n    \"var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)\",\r\n  ),\r\n  dockedContainerMinHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-min-height, 240px)\"),\r\n  dockedContainerMaxHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))\"),\r\n  containedDockedResultsSpace: unsafeCSS(\"var(--m3e-search-view-contained-docked-results-space, 0.25rem)\"),\r\n  dockedResultsBottomSpace: unsafeCSS(\"var(--m3e-search-view-docked-results-bottom-space, 1rem)\"),\r\n  dockedScrimColor: unsafeCSS(`var(--m3e-search-view-docked-scrim-color, ${DesignToken.color.scrim})`),\r\n  dockedScrimOpacity: unsafeCSS(\"var(--m3e-search-view-docked-scrim-opacity, 32%)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SearchViewToken } from \"./SearchViewToken\";\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewLightDomStyle = css`\r\n  m3e-search-view input[slot=\"input\"]::placeholder {\r\n    user-select: none;\r\n    color: ${SearchBarToken.supportingTextColor};\r\n    font-size: ${SearchBarToken.supportingTextFontSize};\r\n    font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n    line-height: ${SearchBarToken.supportingTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n  }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    position: relative;\r\n    width: 100%;\r\n  }\r\n  .anchor {\r\n    position: absolute;\r\n    width: 100%;\r\n    visibility: hidden;\r\n  }\r\n  .view {\r\n    display: flex;\r\n    flex-direction: column;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    outline: none;\r\n    padding: unset;\r\n    margin: unset;\r\n    border: unset;\r\n  }\r\n  .header {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .bar {\r\n    flex: 1 1 auto;\r\n  }\r\n  :host(:state(-fullscreen)) .bar {\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:state(-fullscreen)[contained]:not([open])) .bar {\r\n    margin-inline-start: ${SearchViewToken.containedLeadingMargin};\r\n    margin-inline-end: ${SearchViewToken.containedTrailingMargin};\r\n  }\r\n  :host(:state(-fullscreen)[contained][open]) .bar,\r\n  :host(:state(-fullscreen)[contained][open]) .results {\r\n    margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin};\r\n    margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin};\r\n  }\r\n  .icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n  }\r\n  ::slotted([slot=\"search-icon\"]),\r\n  .search-icon,\r\n  ::slotted([slot=\"close-icon\"]),\r\n  .close-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  .results {\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .scroll-container {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n  }\r\n  .view:not(:popover-open) .results,\r\n  .view.closing .results {\r\n    display: none;\r\n  }\r\n  :host(:not(:is(:state(-clearable), [open]))) .clear {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"clear-icon\"]),\r\n  .clear-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  slot[name=\"clear-icon\"] {\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  :host(:state(-fullscreen)) .header {\r\n    transition: height 150ms cubic-bezier(0.2, 0, 0, 1);\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header {\r\n    height: ${SearchViewToken.fullScreenHeaderContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen):not([open])) .header,\r\n  :host(:state(-fullscreen)[open]) .view.closing .header {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)[open]) .bar {\r\n    --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)) .anchor {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open {\r\n    border-radius: ${SearchViewToken.fullScreenContainerShape};\r\n  }\r\n  :host(:state(-fullscreen)[contained]) .view:popover-open {\r\n    background-color: ${SearchViewToken.containedContainerColor};\r\n  }\r\n  :host(:state(-fullscreen):not([contained])) .view:popover-open {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked)[open]) .header,\r\n  :host(:state(-docked)) .anchor {\r\n    height: ${SearchViewToken.dockedHeaderContainerHeight};\r\n  }\r\n  :host(:not([contained])[open]) .results {\r\n    border-top-width: ${SearchViewToken.dividerThickness};\r\n    border-top-style: solid;\r\n    border-top-color: ${SearchViewToken.dividerColor};\r\n  }\r\n  :host(:state(-docked)[contained]) .results {\r\n    margin-top: ${SearchViewToken.containedDockedBarResultsGap};\r\n  }\r\n  :host(:state(-docked):not([contained])[open]) .view {\r\n    background-color: ${SearchViewToken.containerColor};\r\n    --m3e-search-bar-container-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked)[contained]) .results {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked):not([contained])[open]) .view,\r\n  :host(:state(-docked)[contained]) .results {\r\n    border-radius: ${SearchViewToken.dockedContainerShape};\r\n  }\r\n  :host(:state(-docked)) .results {\r\n    min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n    max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n  }\r\n  :host(:state(-docked)) .scroll-container {\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n  }\r\n  :host(:state(-docked):not([contained])) .scroll-container {\r\n    padding-bottom: ${SearchViewToken.dockedResultsBottomSpace};\r\n  }\r\n  :host(:state(-docked)[contained]) .scroll-container {\r\n    padding: ${SearchViewToken.containedDockedResultsSpace};\r\n  }\r\n  :host(:state(-docked)) .results {\r\n    transform-origin: top;\r\n    transition: ${unsafeCSS(\r\n      `transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n      overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  :host(:state(-docked):not([open])) .results {\r\n    transform: scaleY(0.8);\r\n  }\r\n  :host(:state(-docked)[open]) .results {\r\n    transform: scaleY(1);\r\n  }\r\n  @starting-style {\r\n    :host(:state(-docked)[open]) .results {\r\n      transform: scaleY(0.8);\r\n    }\r\n  }\r\n  :host(:state(-docked)[contained]) .view {\r\n    background-color: transparent;\r\n  }\r\n  :host(:state(-docked):not([open])) .view {\r\n    transition: ${unsafeCSS(\r\n      `border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},\r\n      background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:state(-docked):not([open])) .view::backdrop {\r\n    transition: ${unsafeCSS(\r\n      `background-color ${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(:state(-docked)) .view::backdrop {\r\n    background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n    margin-inline-end: -20px;\r\n  }\r\n  :host(:state(-docked)[open]) .view::backdrop {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity},\r\n      transparent\r\n    );\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    :host(:state(-docked)[open]) .view::backdrop {\r\n      background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n    }\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    overflow: hidden;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host(:state(-fullscreen)) .bar,\r\n    :host(:state(-fullscreen)) .header,\r\n    :host(:state(-docked)) .results,\r\n    :host(:state(-docked):not([open])) .view,\r\n    :host(:state(-docked):not([open])) .view::backdrop,\r\n    :host(:state(-docked)[open]) .view::backdrop {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([contained])[open]) .bar {\r\n      --_search-bar-forced-color-outline-style: none;\r\n    }\r\n    :host(:state(-docked):not([contained])[open]) .view,\r\n    :host(:state(-docked)[contained]) .results {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:not([contained])[open]) .results {\r\n      border-top-color: CanvasText;\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  EventAttribute,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\nimport { SearchBarLightDomStyle, SearchBarStyle } from \"./styles\";\r\n\r\n/**\r\n * A bar that provides a prominent entry point for search.\r\n *\r\n * @description\r\n * The `m3e-search-bar` component provides a prominent entry point for search,\r\n * capturing user input and emitting `query` and `clear` events as the text\r\n * changes. It reflects focus and interaction states through customizable CSS\r\n * properties for container, icons, and text styling.\r\n *\r\n * @example\r\n * The following example illustrates typical usage with a leading icon and the\r\n * ability to clear the current search text.\r\n * ```html\r\n * <m3e-search-bar clearable>\r\n *  <m3e-icon name=\"search\" slot=\"leading\"></m3e-icon>\r\n *  <input slot=\"input\" placeholder=\"Search...\" />\r\n *  </m3e-search-bar>\r\n * ```\r\n *\r\n * @tag m3e-search-bar\r\n *\r\n * @attr clearable - Whether the bar presents a button used to clear the search term.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n *\r\n * @slot leading - Renders content before the input of the bar.\r\n * @slot input - Renders the input of the bar.\r\n * @slot trailing - Renders content after the input of the bar.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n *\r\n * @cssprop --m3e-search-bar-container-color - Background color of the search bar container.\r\n * @cssprop --m3e-search-bar-leading-icon-color - Color of the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-icon-color - Color of the trailing icon.\r\n * @cssprop --m3e-search-bar-container-height - Height of the search bar container.\r\n * @cssprop --m3e-search-bar-container-shape - Shape (border radius) of the search bar container.\r\n * @cssprop --m3e-search-bar-icon-size - Size of icons inside the search bar.\r\n * @cssprop --m3e-search-bar-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-tracking - Letter spacing of the supporting text.\r\n * @cssprop --m3e-search-bar-input-color - Color of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-size - Font size of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-weight - Font weight of the input text.\r\n * @cssprop --m3e-search-bar-input-text-line-height - Line height of the input text.\r\n * @cssprop --m3e-search-bar-input-text-tracking - Letter spacing of the input text.\r\n * @cssprop --m3e-search-bar-leading-space - Space before the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-space - Space after the trailing icon.\r\n * @cssprop --m3e-search-bar-no-actions-leading-space - Leading padding when no actions are present.\r\n * @cssprop --m3e-search-bar-no-actions-trailing-space - Trailing padding when no actions are present.\r\n * @cssprop --m3e-search-bar-leading-actions-trailing-space - Space between leading actions and the input.\r\n * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.\r\n * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.\r\n */\r\n@customElement(\"m3e-search-bar\")\r\nexport class M3eSearchBarElement extends EventAttribute(AttachInternals(LitElement), \"clear\") {\r\n  static {\r\n    registerStyleSheet(SearchBarLightDomStyle);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles = SearchBarStyle;\r\n\r\n  /** @private */ #input?: HTMLInputElement;\r\n  /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n\r\n  /**\r\n   * Whether the bar presents a button used to clear the search term.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) clearable = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to clear the search term.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /** Clears the search term. */\r\n  clear(): void {\r\n    if (!this.#input) return;\r\n    this.#input.value = \"\";\r\n    this.#handleInputInput();\r\n\r\n    this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`\r\n      <div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        <slot name=\"leading\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n        <slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n        ${this.#renderClearButton()}\r\n        <slot name=\"trailing\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** @private */\r\n  #renderClearButton(): unknown {\r\n    return this.clearable\r\n      ? html`<div class=\"clear\">\r\n          <m3e-icon-button aria-label=\"${this.clearLabel}\" @click=\"${this.#handleClearClick}\">\r\n            <slot name=\"clear-icon\">\r\n              <svg class=\"clear-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        </div>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(): void {\r\n    if (!this.matches(\":focus-within\")) {\r\n      this.#input?.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleLeadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-leading\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-trailing\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(e: Event): void {\r\n    const input = (e.target as HTMLSlotElement)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof HTMLInputElement);\r\n\r\n    if (input != this.#input) {\r\n      this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input = input;\r\n      this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n\r\n      if (this.#input) {\r\n        this.#input.role = this.#input.role || \"searchbox\";\r\n        this.#input.inputMode = this.#input.inputMode || \"search\";\r\n        this.#input.type = \"text\";\r\n      }\r\n\r\n      this.#handleInputInput();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputInput(): void {\r\n    setCustomState(this, \"-clearable\", this.clearable && (this.#input?.value ?? \"\").length > 0);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.clear();\r\n    this.#input?.focus();\r\n  }\r\n}\r\n\r\ninterface M3eSearchBarElementEventMap extends HTMLElementEventMap {\r\n  clear: Event;\r\n}\r\n\r\nexport interface M3eSearchBarElement {\r\n  addEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[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 M3eSearchBarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[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-search-bar\": M3eSearchBarElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing, PropertyValues, svg } 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  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  EventAttribute,\r\n  FocusController,\r\n  InertController,\r\n  prefersReducedMotion,\r\n  registerStyleSheet,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { SearchViewLightDomStyle, SearchViewStyle } from \"./styles\";\r\nimport { SearchViewMode } from \"./SearchViewMode\";\r\nimport { SearchViewQueryEventDetail } from \"./SearchViewQueryEventDetail\";\r\n\r\nimport \"./SearchBarElement\";\r\n\r\n/**\r\n * A surface that presents suggestions and results for a search.\r\n *\r\n * @description\r\n * The `m3e-search-view` component presents the surface for suggestions,\r\n * history, and results, managing the open and close lifecycle around an\r\n * embedded search bar. It emits `query`, `clear`, and `toggle`, events to\r\n * support application driven search logic, and exposes CSS properties for\r\n * container, shape, spacing, and layout across contained, docked, and full\r\n * screen configurations.\r\n *\r\n * @example\r\n * The following example shows a contained view in docked mode with a simple set of search results.\r\n * ```html\r\n * <m3e-search-view mode=\"docked\" contained>\r\n *   <input slot=\"input\" placeholder=\"Search...\" />\r\n *   <m3e-list>\r\n *     <m3e-list-item>Result One</m3e-list-item>\r\n *     <m3e-list-item>Result Two</m3e-list-item>\r\n *     <m3e-list-item>Result Three</m3e-list-item>\r\n *   </m3e-list>\r\n * </m3e-search-view>\r\n * ```\r\n *\r\n * @tag m3e-search-view\r\n *\r\n * @attr contained - Whether the view features a persistent, filled search container.\r\n * @attr mode - The behavior mode of the view.\r\n * @attr open - Whether the view is expanded to show results.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n * @attr close-label - The accessible label given to the button used to collapse the view.\r\n * @attr hide-search-icon - Whether to hide the search icon.\r\n *\r\n * @slot - When open, renders the results content of the view.\r\n * @slot input - Renders the input of the view.\r\n * @slot open-leading - When open, renders content before the input of the view.\r\n * @slot open-trailing - When open, renders content after the input of the view.\r\n * @slot closed-leading - When closed, renders content before the input of the view.\r\n * @slot closed-trailing - When closed, renders content after the input of the view.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n * @fires query - Dispatched when the view is opened or when the user modifies the search term.\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-search-view-container-color - Background color of the view container.\r\n * @cssprop --m3e-search-view-contained-container-color - Background color of the contained view container.\r\n * @cssprop --m3e-search-view-divider-color - Color of the divider separating header and results.\r\n * @cssprop --m3e-search-view-divider-thickness - Thickness of the divider separating header and results.\r\n * @cssprop --m3e-search-view-full-screen-container-shape - Shape of the fullscreen view container.\r\n * @cssprop --m3e-search-view-full-screen-header-container-height - Height of the header container in fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-shape - Shape of the docked view container.\r\n * @cssprop --m3e-search-view-docked-header-container-height - Height of the header container in docked mode.\r\n * @cssprop --m3e-search-view-contained-leading-margin - Leading margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-trailing-margin - Trailing margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-focused-leading-margin - Leading margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-focused-trailing-margin - Trailing margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-docked-bar-results-gap - Gap between the contained docked bar and results.\r\n * @cssprop --m3e-search-view-contained-docked-results-shape - Shape of the results container in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-docked-bar-shape - Shape of the bar in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-full-screen-bar-container-height - Height of the bar container in contained fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-min-height - Minimum height of the docked view container.\r\n * @cssprop --m3e-search-view-docked-container-max-height - Maximum height of the docked view container.\r\n * @cssprop --m3e-search-view-contained-docked-results-space - Space above the results in contained docked mode.\r\n * @cssprop --m3e-search-view-docked-results-bottom-space - Space below the results in docked mode.\r\n * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.\r\n * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.\r\n */\r\n@customElement(\"m3e-search-view\")\r\nexport class M3eSearchViewElement extends EventAttribute(AttachInternals(LitElement), \"clear\", \"query\") {\r\n  static {\r\n    registerStyleSheet(SearchViewLightDomStyle);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles = SearchViewStyle;\r\n\r\n  /** @private */ #input?: HTMLInputElement;\r\n  /** @private */ #closeOnInputFocus = false;\r\n  /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n  /** @private */ readonly #inputFocusHandler = () => this.#handleInputFocus();\r\n  /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n  /** @private */ readonly #inputPointerHandler = () => this.#handleInputPointerDown();\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n\r\n  /** @private */ @state() private _clearable = false;\r\n  /** @private */ @state() private _mode?: Exclude<SearchViewMode, \"auto\">;\r\n  /** @private */ #openMode?: Exclude<SearchViewMode, \"auto\">;\r\n\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @query(\".anchor\") private readonly _anchor!: HTMLElement;\r\n  /** @private */ @query(\".view\") private readonly _view!: HTMLElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new FocusController(this, {\r\n      callback: (focused) => this._handleFocusChange(focused),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether the view features a persistent, filled search container.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) contained = false;\r\n\r\n  /**\r\n   * The behavior mode of the view.\r\n   * @default \"docked\"\r\n   */\r\n  @property({ reflect: true }) mode: SearchViewMode = \"docked\";\r\n\r\n  /**\r\n   * Whether the view is expanded to show results.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to clear the search term.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to collapse the view.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * Whether to hide the search icon.\r\n   * @default false;\r\n   */\r\n  @property({ attribute: \"hide-search-icon\", type: Boolean }) hideSearchIcon = false;\r\n\r\n  /** The current mode applied to the view. */\r\n  get currentMode(): Exclude<SearchViewMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"fullscreen\" ? \"docked\" : \"fullscreen\");\r\n  }\r\n  set currentMode(value: Exclude<SearchViewMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** Clears the search term. */\r\n  clear(): void {\r\n    if (!this.#input) return;\r\n    this.#input.value = \"\";\r\n    this.#updateClearableState();\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      const previousMode = changedProperties.get(\"mode\");\r\n      if (previousMode && previousMode !== this.mode && this.open) {\r\n        this.open = false;\r\n      }\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n          const currentMode = this.currentMode;\r\n          this._mode = matches.get(Breakpoint.XSmall) ? \"fullscreen\" : \"docked\";\r\n          if (currentMode !== this._mode && this.open) {\r\n            this.open = false;\r\n          }\r\n          this.#updateMode();\r\n        });\r\n      } else {\r\n        this._mode = undefined;\r\n        this.#updateMode();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this.#updateMode();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"open\")) {\r\n      if (!this.open) {\r\n        if ((this.#openMode ?? this.currentMode) === \"fullscreen\") {\r\n          this.#closeFullscreen();\r\n        } else {\r\n          this.#closeDocked();\r\n        }\r\n      } else {\r\n        if (this.currentMode === \"fullscreen\") {\r\n          this.#openFullscreen();\r\n        } else {\r\n          this.#openDocked();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html` <div class=\"base\">\r\n      <div class=\"anchor\"></div>\r\n      <div\r\n        role=\"${ifDefined(this.open ? \"dialog\" : undefined)}\"\r\n        aria-modal=\"${ifDefined(this.open ? \"true\" : undefined)}\"\r\n        aria-labelledby=\"${ifDefined(this.open ? \"header\" : undefined)}\"\r\n        class=\"view\"\r\n        tabindex=\"-1\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <m3e-focus-trap ?disabled=\"${!this.open}\">\r\n          <div class=\"header\" id=\"header\">\r\n            <m3e-search-bar class=\"bar\">\r\n              ${this.#renderIconOrBackButton()}\r\n              ${this.open\r\n                ? html`<slot name=\"open-leading\" slot=\"leading\"></slot>`\r\n                : html`<slot name=\"closed-leading\" slot=\"leading\"></slot>`}\r\n              <slot name=\"input\" slot=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n              ${this.#renderClearButton()}\r\n              ${this.open\r\n                ? html`<slot name=\"open-trailing\" slot=\"trailing\"></slot>`\r\n                : html`<slot name=\"closed-trailing\" slot=\"trailing\"></slot>`}\r\n            </m3e-search-bar>\r\n          </div>\r\n          <div class=\"results\">\r\n            <div class=\"scroll-container\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </m3e-focus-trap>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIconOrBackButton(): unknown {\r\n    if (!this.open && this.hideSearchIcon) return nothing;\r\n    return html`<div class=\"icon\" slot=\"leading\">${this.open ? this.#renderBackButton() : this.#renderIcon()}</div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<slot name=\"search-icon\">\r\n      <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"\r\n        />\r\n      </svg>\r\n    </slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderBackButton(): unknown {\r\n    return html`<m3e-icon-button\r\n      class=\"close\"\r\n      slot=\"leading\"\r\n      aria-label=\"${this.closeLabel}\"\r\n      @click=\"${this.#handleCloseClick}\"\r\n    >\r\n      <slot name=\"close-icon\">\r\n        <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          ${this.currentMode === \"docked\"\r\n            ? svg`<path d=\"m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z\"/>`\r\n            : svg`<path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>`}\r\n        </svg>\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderClearButton(): unknown {\r\n    return html`<m3e-icon-button\r\n      class=\"clear\"\r\n      slot=\"trailing\"\r\n      aria-label=\"${this.open && !this._clearable ? this.closeLabel : this.clearLabel}\"\r\n      @click=\"${this.#handleClearClick}\"\r\n    >\r\n      <slot name=\"clear-icon\">\r\n        <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path 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        </svg>\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(e: Event): void {\r\n    const input = (e.target as HTMLSlotElement)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof HTMLInputElement);\r\n\r\n    if (input != this.#input) {\r\n      this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input?.removeEventListener(\"focus\", this.#inputFocusHandler);\r\n      this.#input?.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n      this.#input?.removeEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n      this.#input = input;\r\n\r\n      this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input?.addEventListener(\"focus\", this.#inputFocusHandler);\r\n      this.#input?.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n      this.#input?.addEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n      if (this.#input) {\r\n        this.#input.role = this.#input.role || \"searchbox\";\r\n        this.#input.inputMode = this.#input.inputMode || \"search\";\r\n        this.#input.type = \"text\";\r\n        this.#input.ariaHasPopup = \"dialog\";\r\n      }\r\n\r\n      this.#updateClearableState();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputInput(): void {\r\n    this.#updateClearableState();\r\n    if (this.open) {\r\n      this.dispatchEvent(\r\n        new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n          detail: { term: this.#input?.value ?? \"\" },\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n    } else {\r\n      this.open = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateMode(): void {\r\n    setCustomState(this, \"-fullscreen\", this.currentMode === \"fullscreen\");\r\n    setCustomState(this, \"-docked\", this.currentMode === \"docked\");\r\n  }\r\n\r\n  /** @private */\r\n  #updateClearableState(): void {\r\n    this._clearable = (this.#input?.value ?? \"\").length > 0;\r\n    setCustomState(this, \"-clearable\", this._clearable);\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputFocus(): void {\r\n    this.open = !this.#closeOnInputFocus;\r\n    this.#closeOnInputFocus = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleCloseClick(): void {\r\n    if (!this.#input) return;\r\n    if (this.#input.value) {\r\n      this.clear();\r\n    }\r\n    this.#closeOnInputFocus = true;\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    if (!this.#input) return;\r\n    if (this.#input.value) {\r\n      this.clear();\r\n    } else {\r\n      this.#closeOnInputFocus = true;\r\n    }\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputPointerDown(): void {\r\n    if (!this.open && this.#input?.matches(\":focus\")) {\r\n      this.open = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n\r\n      const input = e.target as HTMLInputElement;\r\n      if (input.value) {\r\n        this.clear();\r\n      }\r\n\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.#handleCloseClick();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _handleFocusChange(focused: boolean) {\r\n    if (!focused && this.currentMode === \"docked\") {\r\n      this.clear();\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #openDocked(): Promise<void> {\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"closed\",\r\n          newState: \"open\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = this.currentMode;\r\n    const view = this._view;\r\n\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = await positionAnchor(\r\n      view,\r\n      this._anchor,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        const view = this._view;\r\n        view.style.top = `${y - this._anchor.clientHeight}px`;\r\n        view.style.width = `${this._anchor.clientWidth}px`;\r\n\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          view.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          view.style.left = \"\";\r\n        } else {\r\n          view.style.left = `${x}px`;\r\n          view.style.right = \"\";\r\n        }\r\n      },\r\n    );\r\n\r\n    this._anchor.style.position = \"relative\";\r\n    view.popover = \"manual\";\r\n    view.style.position = \"absolute\";\r\n    view.showPopover();\r\n    this.#scrollLockController.lock();\r\n    this.#inertController.lock();\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"closed\",\r\n        newState: \"open\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: this.#input?.value ?? \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #closeDocked(): void {\r\n    const view = this._view;\r\n    if (view.popover !== \"manual\") return;\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"open\",\r\n          newState: \"closed\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = true;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = undefined;\r\n    this.#scrollLockController.unlock();\r\n    this.#inertController.unlock();\r\n\r\n    if (prefersReducedMotion()) {\r\n      this.#hideDocked();\r\n    } else {\r\n      view.classList.add(\"closing\");\r\n      view.addEventListener(\"transitionend\", () => this.#hideDocked(), { once: true });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #hideDocked(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n\r\n    const view = this._view;\r\n    view.classList.remove(\"closing\");\r\n    view.style.position = \"\";\r\n    view.style.width = \"\";\r\n    view.style.top = \"\";\r\n    view.style.left = \"\";\r\n    view.style.right = \"\";\r\n    view.hidePopover();\r\n    view.popover = null;\r\n    this._anchor.style.position = \"\";\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"open\",\r\n        newState: \"closed\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  async #openFullscreen(): Promise<void> {\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"closed\",\r\n          newState: \"open\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = this.currentMode;\r\n    this.#scrollLockController.lock();\r\n    this.#inertController.lock();\r\n\r\n    const view = this._view;\r\n    this.#anchorCleanup?.();\r\n\r\n    if (!prefersReducedMotion()) {\r\n      const rect = view.getBoundingClientRect();\r\n      const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - rect.right : rect.left;\r\n\r\n      view.style.position = \"fixed\";\r\n      view.popover = \"manual\";\r\n      view.showPopover();\r\n      this._anchor.style.position = \"relative\";\r\n\r\n      view.animate(\r\n        [\r\n          {\r\n            transform: `translateX(${startInline}px)`,\r\n            width: `${rect.width}px`,\r\n            top: `${rect.top}px`,\r\n            height: `${rect.height}px`,\r\n          },\r\n          { transform: \"translateX(0px)\", width: \"100vw\", top: \"0px\", height: \"100vh\" },\r\n        ],\r\n        {\r\n          duration: 150,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      );\r\n    } else {\r\n      view.style.position = \"fixed\";\r\n      view.popover = \"manual\";\r\n      view.showPopover();\r\n      this._anchor.style.position = \"relative\";\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"closed\",\r\n        newState: \"open\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: this.#input?.value ?? \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  async #closeFullscreen(): Promise<void> {\r\n    const view = this._view;\r\n    if (view.popover !== \"manual\") return;\r\n\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"open\",\r\n          newState: \"closed\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = true;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = undefined;\r\n    this.#scrollLockController.unlock();\r\n    this.#inertController.unlock();\r\n\r\n    const anchor = this._anchor;\r\n\r\n    if (!prefersReducedMotion()) {\r\n      const start = view.getBoundingClientRect();\r\n      const end = anchor.getBoundingClientRect();\r\n\r\n      const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - start.right : start.left;\r\n      const endInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - end.right : end.left;\r\n      const dx = M3eDirectionality.current === \"rtl\" ? startInline - endInline : endInline - startInline;\r\n\r\n      view.classList.add(\"closing\");\r\n      await view.animate(\r\n        [\r\n          {\r\n            transform: `translateX(0px)`,\r\n            width: `${start.width}px`,\r\n            top: `${start.top}px`,\r\n            height: `${start.height}px`,\r\n          },\r\n          {\r\n            transform: `translateX(${dx}px)`,\r\n            width: `${end.width}px`,\r\n            top: `${end.top}px`,\r\n            height: `${end.height}px`,\r\n          },\r\n        ],\r\n        {\r\n          duration: 150,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      ).finished;\r\n    }\r\n\r\n    view.hidePopover();\r\n    view.style.position = \"\";\r\n    view.popover = null;\r\n    view.classList.remove(\"closing\");\r\n    anchor.style.position = \"\";\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"open\",\r\n        newState: \"closed\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ninterface M3eSearchViewElementEventMap extends HTMLElementEventMap {\r\n  clear: Event;\r\n  query: CustomEvent<SearchViewQueryEventDetail>;\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSearchViewElement {\r\n  addEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[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 M3eSearchViewElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[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-search-view\": M3eSearchViewElement;\r\n  }\r\n}\r\n"],"names":["SearchBarToken","unsafeCSS","DesignToken","color","surfaceContainerHigh","onSurface","onSurfaceVariant","shape","corner","full","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","SearchBarLightDomStyle","css","SearchBarStyle","SearchViewToken","surfaceContainerLow","outline","none","extraLarge","medium","scrim","SearchViewLightDomStyle","SearchViewStyle","motion","duration","short2","easing","scrollbar","thinWidth","long2","short3","M3eSearchBarElement","EventAttribute","AttachInternals","LitElement","constructor","_M3eSearchBarElement_input","set","this","_M3eSearchBarElement_inputInputHandler","__classPrivateFieldGet","_M3eSearchBarElement_instances","_M3eSearchBarElement_handleInputInput","call","clearable","clearLabel","clear","value","dispatchEvent","Event","bubbles","composed","render","html","_M3eSearchBarElement_handleContainerClick","_M3eSearchBarElement_handleLeadingSlotChange","_M3eSearchBarElement_handleInputSlotChange","_M3eSearchBarElement_renderClearButton","_M3eSearchBarElement_handleTrailingSlotChange","_M3eSearchBarElement_handleClearClick","nothing","matches","focus","e","setCustomState","hasAssignedNodes","target","input","assignedElements","flatten","find","x","HTMLInputElement","removeEventListener","__classPrivateFieldSet","addEventListener","role","inputMode","type","length","registerStyleSheet","styles","__decorate","property","Boolean","reflect","prototype","attribute","customElement","M3eSearchViewElement","super","_M3eSearchViewElement_input","_M3eSearchViewElement_closeOnInputFocus","_M3eSearchViewElement_inputInputHandler","_M3eSearchViewElement_instances","_M3eSearchViewElement_handleInputInput","_M3eSearchViewElement_inputFocusHandler","_M3eSearchViewElement_handleInputFocus","_M3eSearchViewElement_inputKeyDownHandler","_M3eSearchViewElement_inputPointerHandler","_M3eSearchViewElement_handleInputPointerDown","_M3eSearchViewElement_scrollLockController","ScrollLockController","_M3eSearchViewElement_inertController","InertController","_clearable","_M3eSearchViewElement_openMode","_M3eSearchViewElement_anchorCleanup","_M3eSearchViewElement_breakpointUnobserve","contained","mode","open","closeLabel","hideSearchIcon","FocusController","callback","focused","_handleFocusChange","currentMode","_mode","_M3eSearchViewElement_updateClearableState","CustomEvent","detail","term","willUpdate","changedProperties","has","previousMode","get","M3eBreakpointObserver","observe","Breakpoint","XSmall","_M3eSearchViewElement_updateMode","undefined","updated","_changedProperties","_M3eSearchViewElement_openFullscreen","_M3eSearchViewElement_openDocked","_M3eSearchViewElement_closeFullscreen","_M3eSearchViewElement_closeDocked","ifDefined","_M3eSearchViewElement_handleKeyDown","_M3eSearchViewElement_renderIconOrBackButton","_M3eSearchViewElement_handleInputSlotChange","_M3eSearchViewElement_renderClearButton","_M3eSearchViewElement_renderBackButton","_M3eSearchViewElement_renderIcon","_M3eSearchViewElement_handleCloseClick","svg","_M3eSearchViewElement_handleClearClick","ariaHasPopup","key","shiftKey","ctrlKey","preventDefault","async","ToggleEvent","oldState","newState","cancelable","view","_view","positionAnchor","_anchor","position","y","style","top","clientHeight","width","clientWidth","M3eDirectionality","current","right","window","innerWidth","left","popover","showPopover","lock","unlock","prefersReducedMotion","_M3eSearchViewElement_hideDocked","classList","add","once","remove","hidePopover","rect","getBoundingClientRect","startInline","animate","transform","height","anchor","start","end","endInline","dx","finished","state","query","debounce"],"mappings":"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"}
+{"version":3,"file":"search.min.js","sources":["../../src/search/styles/SearchBarToken.ts","../../src/search/styles/SearchBarStyle.ts","../../src/search/styles/SearchViewToken.ts","../../src/search/styles/SearchViewStyle.ts","../../src/search/SearchBarElement.ts","../../src/search/SearchViewElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchBarToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-search-bar-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n  leadingIconColor: unsafeCSS(`var(--m3e-search-bar-leading-icon-color, ${DesignToken.color.onSurface})`),\r\n  trailingIconColor: unsafeCSS(`var(--m3e-search-bar-trailing-icon-color, ${DesignToken.color.onSurfaceVariant})`),\r\n  containerHeight: unsafeCSS(\"var(--m3e-search-bar-container-height, 3.5rem)\"),\r\n  containerShape: unsafeCSS(`var(--m3e-search-bar-container-shape, ${DesignToken.shape.corner.full})`),\r\n  iconSize: unsafeCSS(\"var(--m3e-search-bar-icon-size, 1.5rem)\"),\r\n  supportingTextColor: unsafeCSS(`var(--m3e-search-bar-supporting-text-color, ${DesignToken.color.onSurfaceVariant})`),\r\n  supportingTextFontSize: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n  ),\r\n  supportingTextFontWeight: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n  ),\r\n  supportingTextLineHeight: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n  ),\r\n  supportingTextTracking: unsafeCSS(\r\n    `var(--m3e-search-bar-supporting-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n  ),\r\n  inputColor: unsafeCSS(`var(--m3e-search-bar-input-color, ${DesignToken.color.onSurface})`),\r\n  inputTextFontSize: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n  ),\r\n  inputTextFontWeight: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n  ),\r\n  inputTextLineHeight: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n  ),\r\n  inputTextTracking: unsafeCSS(\r\n    `var(--m3e-search-bar-input-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n  ),\r\n  leadingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-space, 0.25rem)\"),\r\n  trailingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-space, 0.25rem)\"),\r\n  noActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-leading-space, 1rem)\"),\r\n  noActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-trailing-space, 1rem)\"),\r\n  leadingActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)\"),\r\n  trailingActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)\"),\r\n  actionsGap: unsafeCSS(\"var(--m3e-search-bar-actions-gap, 0px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup } from \"lit\";\r\n\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarLightDomStyle = css`\r\n  m3e-search-bar input[slot=\"input\"]::placeholder {\r\n    user-select: none;\r\n    color: ${SearchBarToken.supportingTextColor};\r\n    font-size: ${SearchBarToken.supportingTextFontSize};\r\n    font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n    line-height: ${SearchBarToken.supportingTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n  }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    height: ${SearchBarToken.containerHeight};\r\n  }\r\n  .base {\r\n    cursor: text;\r\n    display: flex;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: ${SearchBarToken.containerShape};\r\n    background-color: ${SearchBarToken.containerColor};\r\n  }\r\n  .clear {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n  }\r\n  :host(:not(:state(-clearable))) .clear {\r\n    display: none;\r\n  }\r\n  :host(:state(-with-leading)) slot[name=\"leading\"],\r\n  :host(:state(-with-trailing)) slot[name=\"trailing\"] {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n    padding-inline: 0.25rem;\r\n    column-gap: calc(0.5rem + ${SearchBarToken.actionsGap});\r\n  }\r\n  ::slotted([slot=\"input\"]) {\r\n    flex: 1 1 auto;\r\n    outline: unset;\r\n    border: unset;\r\n    background-color: transparent;\r\n    box-shadow: none;\r\n    min-width: 0;\r\n    padding: unset;\r\n    color: ${SearchBarToken.inputColor};\r\n    font-size: ${SearchBarToken.inputTextFontSize};\r\n    font-weight: ${SearchBarToken.inputTextFontWeight};\r\n    line-height: ${SearchBarToken.inputTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.inputTextTracking};\r\n  }\r\n  :host(:state(-with-leading)) .base {\r\n    padding-inline-start: ${SearchBarToken.leadingSpace};\r\n  }\r\n  :host(:not(:state(-with-leading))) .base {\r\n    padding-inline-start: ${SearchBarToken.noActionsLeadingSpace};\r\n  }\r\n  :host(:is(:state(-with-trailing), :state(-clearable))) .base {\r\n    padding-inline-end: ${SearchBarToken.trailingSpace};\r\n  }\r\n  :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base {\r\n    padding-inline-end: ${SearchBarToken.noActionsTrailingSpace};\r\n  }\r\n  :host(:state(-with-leading)) ::slotted([slot=\"input\"]) {\r\n    margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace};\r\n  }\r\n  :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot=\"input\"]) {\r\n    margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace};\r\n  }\r\n  slot[name=\"leading\"] {\r\n    color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor};\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  slot[name=\"trailing\"],\r\n  .clear {\r\n    color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor};\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  ::slotted(svg[slot=\"leading\"]),\r\n  ::slotted(svg[slot=\"trailing\"]) {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize};\r\n  }\r\n  ::slotted([slot=\"clear-icon\"]),\r\n  .clear-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  slot[name=\"clear-icon\"] {\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchViewToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-search-view-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n  containedContainerColor: unsafeCSS(\r\n    `var(--m3e-search-view-contained-container-color, ${DesignToken.color.surfaceContainerLow})`,\r\n  ),\r\n  dividerColor: unsafeCSS(`var(--m3e-search-view-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(`var(--m3e-search-view-divider-thickness, 1px)`),\r\n  fullScreenContainerShape: unsafeCSS(\r\n    `var(--m3e-search-view-full-screen-container-shape, ${DesignToken.shape.corner.none})`,\r\n  ),\r\n  fullScreenHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-full-screen-header-container-height, 4.5rem)\"),\r\n  dockedContainerShape: unsafeCSS(\r\n    `var(--m3e-search-view-docked-container-shape, ${DesignToken.shape.corner.extraLarge})`,\r\n  ),\r\n  dockedHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-docked-header-container-height, 3.5rem)\"),\r\n  containedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-leading-margin, 1.5rem)\"),\r\n  containedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-trailing-margin, 1.55rem)\"),\r\n  containedFocusedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)\"),\r\n  containedFocusedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)\"),\r\n  containedDockedBarResultsGap: unsafeCSS(\"var(--m3e-search-view-contained-docked-bar-results-gap, 2px)\"),\r\n  containedDockedResultsShape: unsafeCSS(\r\n    `var(--m3e-search-view-contained-docked-results-shape, ${DesignToken.shape.corner.medium})`,\r\n  ),\r\n  containedDockedBarShape: unsafeCSS(\r\n    `var(--m3e-search-view-contained-docked-bar-shape, ${DesignToken.shape.corner.full})`,\r\n  ),\r\n  containedFullScreenBarContainerHeight: unsafeCSS(\r\n    \"var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)\",\r\n  ),\r\n  dockedContainerMinHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-min-height, 240px)\"),\r\n  dockedContainerMaxHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))\"),\r\n  containedDockedResultsSpace: unsafeCSS(\"var(--m3e-search-view-contained-docked-results-space, 0.25rem)\"),\r\n  dockedResultsBottomSpace: unsafeCSS(\"var(--m3e-search-view-docked-results-bottom-space, 1rem)\"),\r\n  dockedScrimColor: unsafeCSS(`var(--m3e-search-view-docked-scrim-color, ${DesignToken.color.scrim})`),\r\n  dockedScrimOpacity: unsafeCSS(\"var(--m3e-search-view-docked-scrim-opacity, 32%)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SearchViewToken } from \"./SearchViewToken\";\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewLightDomStyle = css`\r\n  m3e-search-view input[slot=\"input\"]::placeholder {\r\n    user-select: none;\r\n    color: ${SearchBarToken.supportingTextColor};\r\n    font-size: ${SearchBarToken.supportingTextFontSize};\r\n    font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n    line-height: ${SearchBarToken.supportingTextLineHeight};\r\n    letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n  }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    position: relative;\r\n    width: 100%;\r\n  }\r\n  .anchor {\r\n    position: absolute;\r\n    width: 100%;\r\n    visibility: hidden;\r\n  }\r\n  .view {\r\n    display: flex;\r\n    flex-direction: column;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    outline: none;\r\n    padding: unset;\r\n    margin: unset;\r\n    border: unset;\r\n  }\r\n  .header {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .bar {\r\n    flex: 1 1 auto;\r\n  }\r\n  :host(:state(-fullscreen)) .bar {\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:state(-fullscreen)[contained]:not([open])) .bar {\r\n    margin-inline-start: ${SearchViewToken.containedLeadingMargin};\r\n    margin-inline-end: ${SearchViewToken.containedTrailingMargin};\r\n  }\r\n  :host(:state(-fullscreen)[contained][open]) .bar,\r\n  :host(:state(-fullscreen)[contained][open]) .results {\r\n    margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin};\r\n    margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin};\r\n  }\r\n  .icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    min-width: 3rem;\r\n  }\r\n  ::slotted([slot=\"search-icon\"]),\r\n  .search-icon,\r\n  ::slotted([slot=\"close-icon\"]),\r\n  .close-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  .results {\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .scroll-container {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n  }\r\n  .view:not(:popover-open) .results,\r\n  .view.closing .results {\r\n    display: none;\r\n  }\r\n  :host(:not(:is(:state(-clearable), [open]))) .clear {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"clear-icon\"]),\r\n  .clear-icon {\r\n    width: 1em;\r\n    font-size: ${SearchBarToken.iconSize} !important;\r\n  }\r\n  slot[name=\"clear-icon\"] {\r\n    --m3e-icon-size: ${SearchBarToken.iconSize};\r\n  }\r\n  :host(:state(-fullscreen)) .header {\r\n    transition: height 150ms cubic-bezier(0.2, 0, 0, 1);\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header {\r\n    height: ${SearchViewToken.fullScreenHeaderContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen):not([open])) .header,\r\n  :host(:state(-fullscreen)[open]) .view.closing .header {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)[open]) .bar {\r\n    --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)) .anchor {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open {\r\n    border-radius: ${SearchViewToken.fullScreenContainerShape};\r\n  }\r\n  :host(:state(-fullscreen)[contained]) .view:popover-open {\r\n    background-color: ${SearchViewToken.containedContainerColor};\r\n  }\r\n  :host(:state(-fullscreen):not([contained])) .view:popover-open {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked)[open]) .header,\r\n  :host(:state(-docked)) .anchor {\r\n    height: ${SearchViewToken.dockedHeaderContainerHeight};\r\n  }\r\n  :host(:not([contained])[open]) .results {\r\n    border-top-width: ${SearchViewToken.dividerThickness};\r\n    border-top-style: solid;\r\n    border-top-color: ${SearchViewToken.dividerColor};\r\n  }\r\n  :host(:state(-docked)[contained]) .results {\r\n    margin-top: ${SearchViewToken.containedDockedBarResultsGap};\r\n  }\r\n  :host(:state(-docked):not([contained])[open]) .view {\r\n    background-color: ${SearchViewToken.containerColor};\r\n    --m3e-search-bar-container-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked)[contained]) .results {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:state(-docked):not([contained])[open]) .view,\r\n  :host(:state(-docked)[contained]) .results {\r\n    border-radius: ${SearchViewToken.dockedContainerShape};\r\n  }\r\n  :host(:state(-docked)) .results {\r\n    min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n    max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n  }\r\n  :host(:state(-docked)) .scroll-container {\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n  }\r\n  :host(:state(-docked):not([contained])) .scroll-container {\r\n    padding-bottom: ${SearchViewToken.dockedResultsBottomSpace};\r\n  }\r\n  :host(:state(-docked)[contained]) .scroll-container {\r\n    padding: ${SearchViewToken.containedDockedResultsSpace};\r\n  }\r\n  :host(:state(-docked)) .results {\r\n    transform-origin: top;\r\n    transition: ${unsafeCSS(\r\n      `transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n      overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  :host(:state(-docked):not([open])) .results {\r\n    transform: scaleY(0.8);\r\n  }\r\n  :host(:state(-docked)[open]) .results {\r\n    transform: scaleY(1);\r\n  }\r\n  @starting-style {\r\n    :host(:state(-docked)[open]) .results {\r\n      transform: scaleY(0.8);\r\n    }\r\n  }\r\n  :host(:state(-docked)[contained]) .view {\r\n    background-color: transparent;\r\n  }\r\n  :host(:state(-docked):not([open])) .view {\r\n    transition: ${unsafeCSS(\r\n      `border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},\r\n      background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:state(-docked):not([open])) .view::backdrop {\r\n    transition: ${unsafeCSS(\r\n      `background-color ${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(:state(-docked)) .view::backdrop {\r\n    background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n    margin-inline-end: -20px;\r\n  }\r\n  :host(:state(-docked)[open]) .view::backdrop {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity},\r\n      transparent\r\n    );\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    :host(:state(-docked)[open]) .view::backdrop {\r\n      background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n    }\r\n  }\r\n  :host(:state(-fullscreen)) .view:popover-open {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    overflow: hidden;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host(:state(-fullscreen)) .bar,\r\n    :host(:state(-fullscreen)) .header,\r\n    :host(:state(-docked)) .results,\r\n    :host(:state(-docked):not([open])) .view,\r\n    :host(:state(-docked):not([open])) .view::backdrop,\r\n    :host(:state(-docked)[open]) .view::backdrop {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([contained])[open]) .bar {\r\n      --_search-bar-forced-color-outline-style: none;\r\n    }\r\n    :host(:state(-docked):not([contained])[open]) .view,\r\n    :host(:state(-docked)[contained]) .results {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:not([contained])[open]) .results {\r\n      border-top-color: CanvasText;\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  EventAttribute,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\nimport { SearchBarLightDomStyle, SearchBarStyle } from \"./styles\";\r\n\r\n/**\r\n * A bar that provides a prominent entry point for search.\r\n *\r\n * @description\r\n * The `m3e-search-bar` component provides a prominent entry point for search,\r\n * capturing user input and emitting `query` and `clear` events as the text\r\n * changes. It reflects focus and interaction states through customizable CSS\r\n * properties for container, icons, and text styling.\r\n *\r\n * @example\r\n * The following example illustrates typical usage with a leading icon and the\r\n * ability to clear the current search text.\r\n * ```html\r\n * <m3e-search-bar clearable>\r\n *  <m3e-icon name=\"search\" slot=\"leading\"></m3e-icon>\r\n *  <input slot=\"input\" placeholder=\"Search...\" />\r\n *  </m3e-search-bar>\r\n * ```\r\n *\r\n * @tag m3e-search-bar\r\n *\r\n * @attr clearable - Whether the bar presents a button used to clear the search term.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n *\r\n * @slot leading - Renders content before the input of the bar.\r\n * @slot input - Renders the input of the bar.\r\n * @slot trailing - Renders content after the input of the bar.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n *\r\n * @cssprop --m3e-search-bar-container-color - Background color of the search bar container.\r\n * @cssprop --m3e-search-bar-leading-icon-color - Color of the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-icon-color - Color of the trailing icon.\r\n * @cssprop --m3e-search-bar-container-height - Height of the search bar container.\r\n * @cssprop --m3e-search-bar-container-shape - Shape (border radius) of the search bar container.\r\n * @cssprop --m3e-search-bar-icon-size - Size of icons inside the search bar.\r\n * @cssprop --m3e-search-bar-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-tracking - Letter spacing of the supporting text.\r\n * @cssprop --m3e-search-bar-input-color - Color of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-size - Font size of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-weight - Font weight of the input text.\r\n * @cssprop --m3e-search-bar-input-text-line-height - Line height of the input text.\r\n * @cssprop --m3e-search-bar-input-text-tracking - Letter spacing of the input text.\r\n * @cssprop --m3e-search-bar-leading-space - Space before the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-space - Space after the trailing icon.\r\n * @cssprop --m3e-search-bar-no-actions-leading-space - Leading padding when no actions are present.\r\n * @cssprop --m3e-search-bar-no-actions-trailing-space - Trailing padding when no actions are present.\r\n * @cssprop --m3e-search-bar-leading-actions-trailing-space - Space between leading actions and the input.\r\n * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.\r\n * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.\r\n */\r\n@customElement(\"m3e-search-bar\")\r\nexport class M3eSearchBarElement extends EventAttribute(AttachInternals(LitElement), \"clear\") {\r\n  static {\r\n    registerStyleSheet(SearchBarLightDomStyle);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles = SearchBarStyle;\r\n\r\n  /** @private */ #input?: HTMLInputElement;\r\n  /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n\r\n  /**\r\n   * Whether the bar presents a button used to clear the search term.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) clearable = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to clear the search term.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /** Clears the search term. */\r\n  clear(): void {\r\n    if (!this.#input) return;\r\n    this.#input.value = \"\";\r\n    this.#handleInputInput();\r\n\r\n    this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`\r\n      <div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        <slot name=\"leading\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n        <slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n        ${this.#renderClearButton()}\r\n        <slot name=\"trailing\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** @private */\r\n  #renderClearButton(): unknown {\r\n    return this.clearable\r\n      ? html`<div class=\"clear\">\r\n          <m3e-icon-button aria-label=\"${this.clearLabel}\" @click=\"${this.#handleClearClick}\">\r\n            <slot name=\"clear-icon\">\r\n              <svg class=\"clear-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        </div>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(): void {\r\n    if (!this.matches(\":focus-within\")) {\r\n      this.#input?.focus();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleLeadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-leading\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-trailing\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(e: Event): void {\r\n    const input = (e.target as HTMLSlotElement)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof HTMLInputElement);\r\n\r\n    if (input != this.#input) {\r\n      this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input = input;\r\n      this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n\r\n      if (this.#input) {\r\n        this.#input.role = this.#input.role || \"searchbox\";\r\n        this.#input.inputMode = this.#input.inputMode || \"search\";\r\n        this.#input.type = \"text\";\r\n      }\r\n\r\n      this.#handleInputInput();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputInput(): void {\r\n    setCustomState(this, \"-clearable\", this.clearable && (this.#input?.value ?? \"\").length > 0);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    this.clear();\r\n    this.#input?.focus();\r\n  }\r\n}\r\n\r\ninterface M3eSearchBarElementEventMap extends HTMLElementEventMap {\r\n  clear: Event;\r\n}\r\n\r\nexport interface M3eSearchBarElement {\r\n  addEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[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 M3eSearchBarElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[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-search-bar\": M3eSearchBarElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing, PropertyValues, svg } 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  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  EventAttribute,\r\n  FocusController,\r\n  InertController,\r\n  prefersReducedMotion,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { SearchViewLightDomStyle, SearchViewStyle } from \"./styles\";\r\nimport { SearchViewMode } from \"./SearchViewMode\";\r\nimport { SearchViewQueryEventDetail } from \"./SearchViewQueryEventDetail\";\r\n\r\nimport \"./SearchBarElement\";\r\n\r\n/**\r\n * A surface that presents suggestions and results for a search.\r\n *\r\n * @description\r\n * The `m3e-search-view` component presents the surface for suggestions,\r\n * history, and results, managing the open and close lifecycle around an\r\n * embedded search bar. It emits `query`, `clear`, and `toggle`, events to\r\n * support application driven search logic, and exposes CSS properties for\r\n * container, shape, spacing, and layout across contained, docked, and full\r\n * screen configurations.\r\n *\r\n * @example\r\n * The following example shows a contained view in docked mode with a simple set of search results.\r\n * ```html\r\n * <m3e-search-view mode=\"docked\" contained>\r\n *   <input slot=\"input\" placeholder=\"Search...\" />\r\n *   <m3e-list>\r\n *     <m3e-list-item>Result One</m3e-list-item>\r\n *     <m3e-list-item>Result Two</m3e-list-item>\r\n *     <m3e-list-item>Result Three</m3e-list-item>\r\n *   </m3e-list>\r\n * </m3e-search-view>\r\n * ```\r\n *\r\n * @tag m3e-search-view\r\n *\r\n * @attr contained - Whether the view features a persistent, filled search container.\r\n * @attr mode - The behavior mode of the view.\r\n * @attr open - Whether the view is expanded to show results.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n * @attr close-label - The accessible label given to the button used to collapse the view.\r\n * @attr hide-search-icon - Whether to hide the search icon.\r\n *\r\n * @slot - When open, renders the results content of the view.\r\n * @slot input - Renders the input of the view.\r\n * @slot open-leading - When open, renders content before the input of the view.\r\n * @slot open-trailing - When open, renders content after the input of the view.\r\n * @slot closed-leading - When closed, renders content before the input of the view.\r\n * @slot closed-trailing - When closed, renders content after the input of the view.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n * @fires query - Dispatched when the view is opened or when the user modifies the search term.\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-search-view-container-color - Background color of the view container.\r\n * @cssprop --m3e-search-view-contained-container-color - Background color of the contained view container.\r\n * @cssprop --m3e-search-view-divider-color - Color of the divider separating header and results.\r\n * @cssprop --m3e-search-view-divider-thickness - Thickness of the divider separating header and results.\r\n * @cssprop --m3e-search-view-full-screen-container-shape - Shape of the fullscreen view container.\r\n * @cssprop --m3e-search-view-full-screen-header-container-height - Height of the header container in fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-shape - Shape of the docked view container.\r\n * @cssprop --m3e-search-view-docked-header-container-height - Height of the header container in docked mode.\r\n * @cssprop --m3e-search-view-contained-leading-margin - Leading margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-trailing-margin - Trailing margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-focused-leading-margin - Leading margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-focused-trailing-margin - Trailing margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-docked-bar-results-gap - Gap between the contained docked bar and results.\r\n * @cssprop --m3e-search-view-contained-docked-results-shape - Shape of the results container in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-docked-bar-shape - Shape of the bar in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-full-screen-bar-container-height - Height of the bar container in contained fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-min-height - Minimum height of the docked view container.\r\n * @cssprop --m3e-search-view-docked-container-max-height - Maximum height of the docked view container.\r\n * @cssprop --m3e-search-view-contained-docked-results-space - Space above the results in contained docked mode.\r\n * @cssprop --m3e-search-view-docked-results-bottom-space - Space below the results in docked mode.\r\n * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.\r\n * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.\r\n */\r\n@customElement(\"m3e-search-view\")\r\nexport class M3eSearchViewElement extends EventAttribute(\r\n  ReconnectedCallback(AttachInternals(LitElement)),\r\n  \"clear\",\r\n  \"query\",\r\n) {\r\n  static {\r\n    registerStyleSheet(SearchViewLightDomStyle);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles = SearchViewStyle;\r\n\r\n  /** @private */ #input?: HTMLInputElement;\r\n  /** @private */ #closeOnInputFocus = false;\r\n  /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n  /** @private */ readonly #inputFocusHandler = () => this.#handleInputFocus();\r\n  /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n  /** @private */ readonly #inputPointerHandler = () => this.#handleInputPointerDown();\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n\r\n  /** @private */ @state() private _clearable = false;\r\n  /** @private */ @state() private _mode?: Exclude<SearchViewMode, \"auto\">;\r\n  /** @private */ #openMode?: Exclude<SearchViewMode, \"auto\">;\r\n\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @query(\".anchor\") private readonly _anchor!: HTMLElement;\r\n  /** @private */ @query(\".view\") private readonly _view!: HTMLElement;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new FocusController(this, {\r\n      callback: (focused) => this._handleFocusChange(focused),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether the view features a persistent, filled search container.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) contained = false;\r\n\r\n  /**\r\n   * The behavior mode of the view.\r\n   * @default \"docked\"\r\n   */\r\n  @property({ reflect: true }) mode: SearchViewMode = \"docked\";\r\n\r\n  /**\r\n   * Whether the view is expanded to show results.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to clear the search term.\r\n   * @default \"Clear\"\r\n   */\r\n  @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to collapse the view.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * Whether to hide the search icon.\r\n   * @default false;\r\n   */\r\n  @property({ attribute: \"hide-search-icon\", type: Boolean }) hideSearchIcon = false;\r\n\r\n  /** The current mode applied to the view. */\r\n  get currentMode(): Exclude<SearchViewMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"fullscreen\" ? \"docked\" : \"fullscreen\");\r\n  }\r\n  set currentMode(value: Exclude<SearchViewMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** Clears the search term. */\r\n  clear(): void {\r\n    if (!this.#input) return;\r\n    this.#input.value = \"\";\r\n    this.#updateClearableState();\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.mode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      const previousMode = changedProperties.get(\"mode\");\r\n      if (previousMode && previousMode !== this.mode && this.open) {\r\n        this.open = false;\r\n      }\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this._mode = undefined;\r\n        this.#updateMode();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this.#updateMode();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n    if (_changedProperties.has(\"open\")) {\r\n      if (!this.open) {\r\n        if ((this.#openMode ?? this.currentMode) === \"fullscreen\") {\r\n          this.#closeFullscreen();\r\n        } else {\r\n          this.#closeDocked();\r\n        }\r\n      } else {\r\n        if (this.currentMode === \"fullscreen\") {\r\n          this.#openFullscreen();\r\n        } else {\r\n          this.#openDocked();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html` <div class=\"base\">\r\n      <div class=\"anchor\"></div>\r\n      <div\r\n        role=\"${ifDefined(this.open ? \"dialog\" : undefined)}\"\r\n        aria-modal=\"${ifDefined(this.open ? \"true\" : undefined)}\"\r\n        aria-labelledby=\"${ifDefined(this.open ? \"header\" : undefined)}\"\r\n        class=\"view\"\r\n        tabindex=\"-1\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <m3e-focus-trap ?disabled=\"${!this.open}\">\r\n          <div class=\"header\" id=\"header\">\r\n            <m3e-search-bar class=\"bar\">\r\n              ${this.#renderIconOrBackButton()}\r\n              ${this.open\r\n                ? html`<slot name=\"open-leading\" slot=\"leading\"></slot>`\r\n                : html`<slot name=\"closed-leading\" slot=\"leading\"></slot>`}\r\n              <slot name=\"input\" slot=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n              ${this.#renderClearButton()}\r\n              ${this.open\r\n                ? html`<slot name=\"open-trailing\" slot=\"trailing\"></slot>`\r\n                : html`<slot name=\"closed-trailing\" slot=\"trailing\"></slot>`}\r\n            </m3e-search-bar>\r\n          </div>\r\n          <div class=\"results\">\r\n            <div class=\"scroll-container\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </m3e-focus-trap>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIconOrBackButton(): unknown {\r\n    if (!this.open && this.hideSearchIcon) return nothing;\r\n    return html`<div class=\"icon\" slot=\"leading\">${this.open ? this.#renderBackButton() : this.#renderIcon()}</div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return html`<slot name=\"search-icon\">\r\n      <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"\r\n        />\r\n      </svg>\r\n    </slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderBackButton(): unknown {\r\n    return html`<m3e-icon-button\r\n      class=\"close\"\r\n      slot=\"leading\"\r\n      aria-label=\"${this.closeLabel}\"\r\n      @click=\"${this.#handleCloseClick}\"\r\n    >\r\n      <slot name=\"close-icon\">\r\n        <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          ${this.currentMode === \"docked\"\r\n            ? svg`<path d=\"m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z\"/>`\r\n            : svg`<path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>`}\r\n        </svg>\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderClearButton(): unknown {\r\n    return html`<m3e-icon-button\r\n      class=\"clear\"\r\n      slot=\"trailing\"\r\n      aria-label=\"${this.open && !this._clearable ? this.closeLabel : this.clearLabel}\"\r\n      @click=\"${this.#handleClearClick}\"\r\n    >\r\n      <slot name=\"clear-icon\">\r\n        <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path 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        </svg>\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n      const currentMode = this.currentMode;\r\n      this._mode = matches.get(Breakpoint.XSmall) ? \"fullscreen\" : \"docked\";\r\n      if (currentMode !== this._mode && this.open) {\r\n        this.open = false;\r\n      }\r\n      this.#updateMode();\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(e: Event): void {\r\n    const input = (e.target as HTMLSlotElement)\r\n      .assignedElements({ flatten: true })\r\n      .find((x) => x instanceof HTMLInputElement);\r\n\r\n    if (input != this.#input) {\r\n      this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input?.removeEventListener(\"focus\", this.#inputFocusHandler);\r\n      this.#input?.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n      this.#input?.removeEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n      this.#input = input;\r\n\r\n      this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n      this.#input?.addEventListener(\"focus\", this.#inputFocusHandler);\r\n      this.#input?.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n      this.#input?.addEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n      if (this.#input) {\r\n        this.#input.role = this.#input.role || \"searchbox\";\r\n        this.#input.inputMode = this.#input.inputMode || \"search\";\r\n        this.#input.type = \"text\";\r\n        this.#input.ariaHasPopup = \"dialog\";\r\n      }\r\n\r\n      this.#updateClearableState();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputInput(): void {\r\n    this.#updateClearableState();\r\n    if (this.open) {\r\n      this.dispatchEvent(\r\n        new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n          detail: { term: this.#input?.value ?? \"\" },\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n    } else {\r\n      this.open = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateMode(): void {\r\n    setCustomState(this, \"-fullscreen\", this.currentMode === \"fullscreen\");\r\n    setCustomState(this, \"-docked\", this.currentMode === \"docked\");\r\n  }\r\n\r\n  /** @private */\r\n  #updateClearableState(): void {\r\n    this._clearable = (this.#input?.value ?? \"\").length > 0;\r\n    setCustomState(this, \"-clearable\", this._clearable);\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputFocus(): void {\r\n    this.open = !this.#closeOnInputFocus;\r\n    this.#closeOnInputFocus = false;\r\n  }\r\n\r\n  /** @private */\r\n  #handleCloseClick(): void {\r\n    if (!this.#input) return;\r\n    if (this.#input.value) {\r\n      this.clear();\r\n    }\r\n    this.#closeOnInputFocus = true;\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @private */\r\n  #handleClearClick(): void {\r\n    if (!this.#input) return;\r\n    if (this.#input.value) {\r\n      this.clear();\r\n    } else {\r\n      this.#closeOnInputFocus = true;\r\n    }\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputPointerDown(): void {\r\n    if (!this.open && this.#input?.matches(\":focus\")) {\r\n      this.open = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n\r\n      const input = e.target as HTMLInputElement;\r\n      if (input.value) {\r\n        this.clear();\r\n      }\r\n\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.#handleCloseClick();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _handleFocusChange(focused: boolean) {\r\n    if (!focused && this.currentMode === \"docked\") {\r\n      this.clear();\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #openDocked(): Promise<void> {\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"closed\",\r\n          newState: \"open\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = this.currentMode;\r\n    const view = this._view;\r\n\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = await positionAnchor(\r\n      view,\r\n      this._anchor,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        const view = this._view;\r\n        view.style.top = `${y - this._anchor.clientHeight}px`;\r\n        view.style.width = `${this._anchor.clientWidth}px`;\r\n\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          view.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          view.style.left = \"\";\r\n        } else {\r\n          view.style.left = `${x}px`;\r\n          view.style.right = \"\";\r\n        }\r\n      },\r\n    );\r\n\r\n    this._anchor.style.position = \"relative\";\r\n    view.popover = \"manual\";\r\n    view.style.position = \"absolute\";\r\n    view.showPopover();\r\n    this.#scrollLockController.lock();\r\n    this.#inertController.lock();\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"closed\",\r\n        newState: \"open\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: this.#input?.value ?? \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #closeDocked(): void {\r\n    const view = this._view;\r\n    if (view.popover !== \"manual\") return;\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"open\",\r\n          newState: \"closed\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = true;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = undefined;\r\n    this.#scrollLockController.unlock();\r\n    this.#inertController.unlock();\r\n\r\n    if (prefersReducedMotion()) {\r\n      this.#hideDocked();\r\n    } else {\r\n      view.classList.add(\"closing\");\r\n      view.addEventListener(\"transitionend\", () => this.#hideDocked(), { once: true });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #hideDocked(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n\r\n    const view = this._view;\r\n    view.classList.remove(\"closing\");\r\n    view.style.position = \"\";\r\n    view.style.width = \"\";\r\n    view.style.top = \"\";\r\n    view.style.left = \"\";\r\n    view.style.right = \"\";\r\n    view.hidePopover();\r\n    view.popover = null;\r\n    this._anchor.style.position = \"\";\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"open\",\r\n        newState: \"closed\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  async #openFullscreen(): Promise<void> {\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"closed\",\r\n          newState: \"open\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = this.currentMode;\r\n    this.#scrollLockController.lock();\r\n    this.#inertController.lock();\r\n\r\n    const view = this._view;\r\n    this.#anchorCleanup?.();\r\n\r\n    if (!prefersReducedMotion()) {\r\n      const rect = view.getBoundingClientRect();\r\n      const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - rect.right : rect.left;\r\n\r\n      view.style.position = \"fixed\";\r\n      view.popover = \"manual\";\r\n      view.showPopover();\r\n      this._anchor.style.position = \"relative\";\r\n\r\n      view.animate(\r\n        [\r\n          {\r\n            transform: `translateX(${startInline}px)`,\r\n            width: `${rect.width}px`,\r\n            top: `${rect.top}px`,\r\n            height: `${rect.height}px`,\r\n          },\r\n          { transform: \"translateX(0px)\", width: \"100vw\", top: \"0px\", height: \"100vh\" },\r\n        ],\r\n        {\r\n          duration: 150,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      );\r\n    } else {\r\n      view.style.position = \"fixed\";\r\n      view.popover = \"manual\";\r\n      view.showPopover();\r\n      this._anchor.style.position = \"relative\";\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"closed\",\r\n        newState: \"open\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n        detail: { term: this.#input?.value ?? \"\" },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  async #closeFullscreen(): Promise<void> {\r\n    const view = this._view;\r\n    if (view.popover !== \"manual\") return;\r\n\r\n    if (\r\n      !this.dispatchEvent(\r\n        new ToggleEvent(\"beforetoggle\", {\r\n          oldState: \"open\",\r\n          newState: \"closed\",\r\n          bubbles: true,\r\n          composed: true,\r\n          cancelable: true,\r\n        }),\r\n      )\r\n    ) {\r\n      this.open = true;\r\n      return;\r\n    }\r\n\r\n    this.#openMode = undefined;\r\n    this.#scrollLockController.unlock();\r\n    this.#inertController.unlock();\r\n\r\n    const anchor = this._anchor;\r\n\r\n    if (!prefersReducedMotion()) {\r\n      const start = view.getBoundingClientRect();\r\n      const end = anchor.getBoundingClientRect();\r\n\r\n      const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - start.right : start.left;\r\n      const endInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - end.right : end.left;\r\n      const dx = M3eDirectionality.current === \"rtl\" ? startInline - endInline : endInline - startInline;\r\n\r\n      view.classList.add(\"closing\");\r\n      await view.animate(\r\n        [\r\n          {\r\n            transform: `translateX(0px)`,\r\n            width: `${start.width}px`,\r\n            top: `${start.top}px`,\r\n            height: `${start.height}px`,\r\n          },\r\n          {\r\n            transform: `translateX(${dx}px)`,\r\n            width: `${end.width}px`,\r\n            top: `${end.top}px`,\r\n            height: `${end.height}px`,\r\n          },\r\n        ],\r\n        {\r\n          duration: 150,\r\n          easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n        },\r\n      ).finished;\r\n    }\r\n\r\n    view.hidePopover();\r\n    view.style.position = \"\";\r\n    view.popover = null;\r\n    view.classList.remove(\"closing\");\r\n    anchor.style.position = \"\";\r\n\r\n    this.dispatchEvent(\r\n      new ToggleEvent(\"toggle\", {\r\n        oldState: \"open\",\r\n        newState: \"closed\",\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n}\r\n\r\ninterface M3eSearchViewElementEventMap extends HTMLElementEventMap {\r\n  clear: Event;\r\n  query: CustomEvent<SearchViewQueryEventDetail>;\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSearchViewElement {\r\n  addEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[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 M3eSearchViewElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[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-search-view\": M3eSearchViewElement;\r\n  }\r\n}\r\n"],"names":["SearchBarToken","unsafeCSS","DesignToken","color","surfaceContainerHigh","onSurface","onSurfaceVariant","shape","corner","full","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","SearchBarLightDomStyle","css","SearchBarStyle","SearchViewToken","surfaceContainerLow","outline","none","extraLarge","medium","scrim","SearchViewLightDomStyle","SearchViewStyle","motion","duration","short2","easing","scrollbar","thinWidth","long2","short3","M3eSearchBarElement","EventAttribute","AttachInternals","LitElement","constructor","_M3eSearchBarElement_input","set","this","_M3eSearchBarElement_inputInputHandler","__classPrivateFieldGet","_M3eSearchBarElement_instances","_M3eSearchBarElement_handleInputInput","call","clearable","clearLabel","clear","value","dispatchEvent","Event","bubbles","composed","render","html","_M3eSearchBarElement_handleContainerClick","_M3eSearchBarElement_handleLeadingSlotChange","_M3eSearchBarElement_handleInputSlotChange","_M3eSearchBarElement_renderClearButton","_M3eSearchBarElement_handleTrailingSlotChange","_M3eSearchBarElement_handleClearClick","nothing","matches","focus","e","setCustomState","hasAssignedNodes","target","input","assignedElements","flatten","find","x","HTMLInputElement","removeEventListener","__classPrivateFieldSet","addEventListener","role","inputMode","type","length","registerStyleSheet","styles","__decorate","property","Boolean","reflect","prototype","attribute","customElement","M3eSearchViewElement","ReconnectedCallback","super","_M3eSearchViewElement_input","_M3eSearchViewElement_closeOnInputFocus","_M3eSearchViewElement_inputInputHandler","_M3eSearchViewElement_instances","_M3eSearchViewElement_handleInputInput","_M3eSearchViewElement_inputFocusHandler","_M3eSearchViewElement_handleInputFocus","_M3eSearchViewElement_inputKeyDownHandler","_M3eSearchViewElement_inputPointerHandler","_M3eSearchViewElement_handleInputPointerDown","_M3eSearchViewElement_scrollLockController","ScrollLockController","_M3eSearchViewElement_inertController","InertController","_clearable","_M3eSearchViewElement_openMode","_M3eSearchViewElement_anchorCleanup","_M3eSearchViewElement_breakpointUnobserve","contained","mode","open","closeLabel","hideSearchIcon","FocusController","callback","focused","_handleFocusChange","currentMode","_mode","_M3eSearchViewElement_updateClearableState","CustomEvent","detail","term","disconnectedCallback","undefined","reconnectedCallback","_M3eSearchViewElement_initBreakpointMonitoring","willUpdate","changedProperties","has","previousMode","get","_M3eSearchViewElement_updateMode","updated","_changedProperties","_M3eSearchViewElement_openFullscreen","_M3eSearchViewElement_openDocked","_M3eSearchViewElement_closeFullscreen","_M3eSearchViewElement_closeDocked","ifDefined","_M3eSearchViewElement_handleKeyDown","_M3eSearchViewElement_renderIconOrBackButton","_M3eSearchViewElement_handleInputSlotChange","_M3eSearchViewElement_renderClearButton","_M3eSearchViewElement_renderBackButton","_M3eSearchViewElement_renderIcon","_M3eSearchViewElement_handleCloseClick","svg","_M3eSearchViewElement_handleClearClick","M3eBreakpointObserver","observe","Breakpoint","XSmall","ariaHasPopup","key","shiftKey","ctrlKey","preventDefault","async","ToggleEvent","oldState","newState","cancelable","view","_view","positionAnchor","_anchor","position","y","style","top","clientHeight","width","clientWidth","M3eDirectionality","current","right","window","innerWidth","left","popover","showPopover","lock","unlock","prefersReducedMotion","_M3eSearchViewElement_hideDocked","classList","add","once","remove","hidePopover","rect","getBoundingClientRect","startInline","animate","transform","height","anchor","start","end","endInline","dx","finished","state","query","debounce"],"mappings":"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"}

package/dist/segmented-button.js

@@ -56,8 +56,8 @@ var M3eButtonSegmentElement_1;
  * @fires click - Emitted when the element is clicked.
  *
  * @cssprop --m3e-segmented-button-height - Total height of the segmented button.
- * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button’s border.
- * @cssprop --m3e-segmented-button-outline-color - Color of the button’s border.
+ * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
+ * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.
  * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.
  * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.
  * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.