@m3e/web 2.5.4 → 2.5.6

package/dist/search.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__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,AttachInternals as m,setCustomState as u,hasAssignedNodes as v,registerStyleSheet as g,customElement as f,ReconnectedCallback as b,ScrollLockController as w,InertController as $,FocusController as k,prefersReducedMotion as y,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 _}from"@m3e/web/core/anchoring";import{M3eDirectionality as M}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as L,Breakpoint as S}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";const C=i(`var(--m3e-search-bar-container-color, ${p.color.surfaceContainerHigh})`),z=i(`var(--m3e-search-bar-leading-icon-color, ${p.color.onSurface})`),W=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: ${C}; } .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: ${z}; --m3e-icon-color: ${z}; --m3e-icon-button-icon-color: ${z}; --m3e-icon-size: ${B}; } slot[name="trailing"], .clear { color: ${W}; --m3e-icon-color: ${W}; --m3e-icon-button-icon-color: ${W}; --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}; }`,ke=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])) .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)) .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 ye,xe,Ee,_e,Me,Le,Se,Ce,ze,We;let Te=class extends(m(n)){constructor(){super(...arguments),ye.add(this),xe.set(this,void 0),Ee.set(this,()=>e(this,ye,"m",ze).call(this)),this.clearable=!1,this.clearLabel="Clear"}clear(){e(this,xe,"f")&&(e(this,xe,"f").value="",e(this,ye,"m",ze).call(this),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}render(){return a`<div class="base" @click="${e(this,ye,"m",Me)}"><slot name="leading" @slotchange="${e(this,ye,"m",Le)}"></slot><slot name="input" @slotchange="${e(this,ye,"m",Ce)}"></slot>${e(this,ye,"m",_e).call(this)}<slot name="trailing" @slotchange="${e(this,ye,"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,ht;xe=new WeakMap,Ee=new WeakMap,ye=new WeakSet,_e=function(){return this.clearable?a`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${e(this,ye,"m",We)}"><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},Me=function(){this.matches(":focus-within")||e(this,xe,"f")?.focus()},Le=function(e){u(this,"-with-leading",v(e.target))},Se=function(e){u(this,"-with-trailing",v(e.target))},Ce=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,ye,"m",ze).call(this))},ze=function(){u(this,"-clearable",this.clearable&&(e(this,xe,"f")?.value??"").length>0)},We=function(){this.clear(),e(this,xe,"f")?.focus()},g(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([f("m3e-search-bar")],Te);let dt=class extends(b(m(n))){constructor(){super(),qe.add(this),Be.set(this,void 0),He.set(this,!1),Pe.set(this,()=>e(this,qe,"m",Ne).call(this)),Xe.set(this,()=>e(this,qe,"m",et).call(this)),Ze.set(this,t=>e(this,qe,"m",st).call(this,t)),je.set(this,()=>e(this,qe,"m",it).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 k(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",Qe).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,Ye,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,qe,"m",Ge).call(this)}willUpdate(t){if(super.willUpdate(t),t.has("mode")){e(this,Ye,"f")?.call(this);const o=t.get("mode");o&&o!==this.mode&&this.open&&(this.open=!1),"auto"===this.mode?e(this,qe,"m",Ge).call(this):(this._mode=void 0,e(this,qe,"m",Oe).call(this))}t.has("_mode")&&e(this,qe,"m",Oe).call(this)}updated(t){super.updated(t),t.has("open")&&(this.open?"fullscreen"===this.currentMode?e(this,qe,"m",ct).call(this):e(this,qe,"m",at).call(this):"fullscreen"===(e(this,Fe,"f")??this.currentMode)?e(this,qe,"m",ht).call(this):e(this,qe,"m",rt).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",nt)}"><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",Je)}"></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",tt)}"><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",ot)}"><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(){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",Oe).call(this)}),"f")},Je=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",Qe).call(this))},Ne=function(){e(this,qe,"m",Qe).call(this),this.open?this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0})):this.open=!0},Oe=function(){u(this,"-fullscreen","fullscreen"===this.currentMode),u(this,"-docked","docked"===this.currentMode)},Qe=function(){this._clearable=(e(this,Be,"f")?.value??"").length>0,u(this,"-clearable",this._clearable)},et=function(){this.open=!e(this,He,"f"),t(this,He,!1,"f")},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(){e(this,Be,"f")&&(e(this,Be,"f").value?this.clear():t(this,He,!0,"f"),e(this,Be,"f")?.focus())},it=function(){!this.open&&e(this,Be,"f")?.matches(":focus")&&(this.open=!0)},st=function(e){if(this.open&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey){e.preventDefault();e.target.value&&this.clear(),this.open=!1}},nt=function(t){!this.open||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),e(this,qe,"m",tt).call(this))},at=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 _(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"===M.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}))},rt=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(),y()?e(this,qe,"m",lt).call(this):(o.classList.add("closing"),o.addEventListener("transitionend",()=>e(this,qe,"m",lt).call(this),{once:!0}))):this.open=!0)},lt=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}))},ct=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),y())o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative";else{const e=o.getBoundingClientRect(),t="rtl"===M.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}))},ht=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(!y()){const e=o.getBoundingClientRect(),t=i.getBoundingClientRect(),s="rtl"===M.current?window.innerWidth-e.right:e.left,n="rtl"===M.current?window.innerWidth-t.right:t.left,a="rtl"===M.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}))},g($e),dt.styles=ke,o([h()],dt.prototype,"_clearable",void 0),o([h()],dt.prototype,"_mode",void 0),o([d(".anchor")],dt.prototype,"_anchor",void 0),o([d(".view")],dt.prototype,"_view",void 0),o([c({type:Boolean,reflect:!0})],dt.prototype,"contained",void 0),o([c({reflect:!0})],dt.prototype,"mode",void 0),o([c({type:Boolean,reflect:!0})],dt.prototype,"open",void 0),o([c({attribute:"clear-label"})],dt.prototype,"clearLabel",void 0),o([c({attribute:"close-label"})],dt.prototype,"closeLabel",void 0),o([c({attribute:"hide-search-icon",type:Boolean})],dt.prototype,"hideSearchIcon",void 0),o([x(40)],dt.prototype,"_handleFocusChange",null),dt=o([f("m3e-search-view")],dt);export{Te as M3eSearchBarElement,dt as M3eSearchViewElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{unsafeCSS as o,css as s,LitElement as n,html as a,nothing as r,svg as l}from"lit";import{property as c,state as d,query as h}from"lit/decorators.js";import{DesignToken as p,AttachInternals as m,setCustomState as u,hasAssignedNodes as f,registerStyleSheet as g,customElement as v,ReconnectedCallback as b,ScrollLockController as w,InertController as $,FocusController as k,prefersReducedMotion as y,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 _}from"@m3e/web/core/anchoring";import{M3eDirectionality as M}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as L,Breakpoint as S}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";const C=o(`var(--m3e-search-bar-container-color, ${p.color.surfaceContainerHigh})`),z=o(`var(--m3e-search-bar-leading-icon-color, ${p.color.onSurface})`),W=o(`var(--m3e-search-bar-trailing-icon-color, ${p.color.onSurfaceVariant})`),T=o("var(--m3e-search-bar-container-height, 3.5rem)"),q=o(`var(--m3e-search-bar-container-shape, ${p.shape.corner.full})`),B=o("var(--m3e-search-bar-icon-size, 1.5rem)"),H=o(`var(--m3e-search-bar-supporting-text-color, ${p.color.onSurfaceVariant})`),P=o(`var(--m3e-search-bar-supporting-text-font-size, ${p.typescale.standard.body.large.fontSize})`),X=o(`var(--m3e-search-bar-supporting-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),Z=o(`var(--m3e-search-bar-supporting-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),j=o(`var(--m3e-search-bar-supporting-text-tracking, ${p.typescale.standard.body.large.tracking})`),I=o(`var(--m3e-search-bar-input-color, ${p.color.onSurface})`),K=o(`var(--m3e-search-bar-input-text-font-size, ${p.typescale.standard.body.large.fontSize})`),F=o(`var(--m3e-search-bar-input-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),R=o(`var(--m3e-search-bar-input-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),Y=o(`var(--m3e-search-bar-input-text-tracking, ${p.typescale.standard.body.large.tracking})`),D=o("var(--m3e-search-bar-leading-space, 0.25rem)"),U=o("var(--m3e-search-bar-trailing-space, 0.25rem)"),V=o("var(--m3e-search-bar-no-actions-leading-space, 1rem)"),A=o("var(--m3e-search-bar-no-actions-trailing-space, 1rem)"),G=o("var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)"),J=o("var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)"),N=o("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: ${C}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:is(:state(--clearable), :--clearable))) .clear { display: none; } :host(:is(:state(--with-leading), :--with-leading)) slot[name="leading"], :host(:is(:state(--with-trailing), :--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(:is(:state(--with-leading), :--with-leading)) .base { padding-inline-start: ${D}; } :host(:not(:is(:state(--with-leading), :--with-leading))) .base { padding-inline-start: ${V}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base { padding-inline-end: ${U}; } :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base { padding-inline-end: ${A}; } :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${G}; } :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) ::slotted([slot="input"]) { margin-inline-end: ${J}; } slot[name="leading"] { color: ${z}; --m3e-icon-color: ${z}; --m3e-icon-button-icon-color: ${z}; --m3e-icon-size: ${B}; } slot[name="trailing"], .clear { color: ${W}; --m3e-icon-color: ${W}; --m3e-icon-button-icon-color: ${W}; --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=o(`var(--m3e-search-view-container-color, ${p.color.surfaceContainerHigh})`),te=o(`var(--m3e-search-view-contained-container-color, ${p.color.surfaceContainerLow})`),ie=o(`var(--m3e-search-view-divider-color, ${p.color.outline})`),oe=o("var(--m3e-search-view-divider-thickness, 1px)"),se=o(`var(--m3e-search-view-full-screen-container-shape, ${p.shape.corner.none})`),ne=o("var(--m3e-search-view-full-screen-header-container-height, 4.5rem)"),ae=o(`var(--m3e-search-view-docked-container-shape, ${p.shape.corner.extraLarge})`),re=o("var(--m3e-search-view-docked-header-container-height, 3.5rem)"),le=o("var(--m3e-search-view-contained-leading-margin, 1.5rem)"),ce=o("var(--m3e-search-view-contained-trailing-margin, 1.55rem)"),de=o("var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)"),he=o("var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)"),pe=o("var(--m3e-search-view-contained-docked-bar-results-gap, 2px)"),me=(o(`var(--m3e-search-view-contained-docked-results-shape, ${p.shape.corner.medium})`),o(`var(--m3e-search-view-contained-docked-bar-shape, ${p.shape.corner.full})`),o("var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)")),ue=o("var(--m3e-search-view-docked-container-min-height, 240px)"),fe=o("var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))"),ge=o("var(--m3e-search-view-contained-docked-results-space, 0.25rem)"),ve=o("var(--m3e-search-view-docked-results-bottom-space, 1rem)"),be=o(`var(--m3e-search-view-docked-scrim-color, ${p.color.scrim})`),we=o("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}; }`,ke=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(:is(:state(--fullscreen), :--fullscreen)) .bar { transition: ${o(`margin ${p.motion.duration.short2} ${p.motion.easing.standard}`)}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${le}; margin-inline-end: ${ce}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar, :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .results { margin-inline-start: ${de}; margin-inline-end: ${he}; } .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(:is(:state(--clearable), :--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(:is(:state(--fullscreen), :--fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header { height: ${ne}; } :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header, :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header { height: ${me}; } :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${me}; } :host(:is(:state(--fullscreen), :--fullscreen)) .anchor { height: ${me}; } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { border-radius: ${se}; } :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open { background-color: ${te}; } :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open { background-color: ${ee}; } :host(:is(:state(--docked), :--docked)[open]) .header, :host(:is(:state(--docked), :--docked)) .anchor { height: ${re}; } :host(:not([contained])[open]) .results { border-top-width: ${oe}; border-top-style: solid; border-top-color: ${ie}; } :host(:is(:state(--docked), :--docked)[contained]) .results { margin-top: ${pe}; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view { background-color: ${ee}; --m3e-search-bar-container-color: ${ee}; } :host(:is(:state(--docked), :--docked)[contained]) .results { background-color: ${ee}; } :host(:is(:state(--docked), :--docked):not([contained])) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border-radius: ${ae}; } :host(:is(:state(--docked), :--docked)) .results { min-height: calc(${ue} - ${re}); max-height: calc(${fe} - ${re}); } :host(:is(:state(--docked), :--docked)) .scroll-container { scrollbar-width: ${p.scrollbar.thinWidth}; } :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container { padding-bottom: ${ve}; } :host(:is(:state(--docked), :--docked)[contained]) .scroll-container { padding: ${ge}; } :host(:is(:state(--docked), :--docked)) .results { transform-origin: top; transition: ${o(`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(:is(:state(--docked), :--docked):not([open])) .results { transform: scaleY(0.8); } :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:is(:state(--docked), :--docked)[open]) .results { transform: scaleY(0.8); } } :host(:is(:state(--docked), :--docked)) .view { background-color: transparent; } :host(:is(:state(--docked), :--docked):not([open])) .view { transition: ${o(`border-radius ${p.motion.duration.long2} ${p.motion.easing.standard},\n      background-color ${p.motion.duration.long2} ${p.motion.easing.standard}`)}; } :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop { transition: ${o(`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(:is(:state(--docked), :--docked)) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); margin-inline-end: -20px; } :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${be} ${we}, transparent ); transition: ${o(`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(:is(:state(--docked), :--docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); } } :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:is(:state(--fullscreen), :--fullscreen)) .bar, :host(:is(:state(--fullscreen), :--fullscreen)) .header, :host(:is(:state(--docked), :--docked)) .results, :host(:is(:state(--docked), :--docked):not([open])) .view, :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop, :host(:is(:state(--docked), :--docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:is(:state(--docked), :--docked):not([contained])[open]) .view, :host(:is(:state(--docked), :--docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;var ye,xe,Ee,_e,Me,Le,Se,Ce,ze,We;let Te=class extends(m(n)){constructor(){super(...arguments),ye.add(this),xe.set(this,void 0),Ee.set(this,()=>e(this,ye,"m",ze).call(this)),this.clearable=!1,this.clearLabel="Clear"}clear(){e(this,xe,"f")&&(e(this,xe,"f").value="",e(this,ye,"m",ze).call(this),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}render(){return a`<div class="base" @click="${e(this,ye,"m",Me)}"><slot name="leading" @slotchange="${e(this,ye,"m",Le)}"></slot><slot name="input" @slotchange="${e(this,ye,"m",Ce)}"></slot>${e(this,ye,"m",_e).call(this)}<slot name="trailing" @slotchange="${e(this,ye,"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,it,ot,st,nt,at,rt,lt,ct,dt;xe=new WeakMap,Ee=new WeakMap,ye=new WeakSet,_e=function(){return this.clearable?a`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${e(this,ye,"m",We)}"><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},Me=function(){this.matches(":focus-within")||e(this,xe,"f")?.focus()},Le=function(e){u(this,"--with-leading",f(e.target))},Se=function(e){u(this,"--with-trailing",f(e.target))},Ce=function(i){const o=i.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);o!=e(this,xe,"f")&&(e(this,xe,"f")?.removeEventListener("input",e(this,Ee,"f")),t(this,xe,o,"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,ye,"m",ze).call(this))},ze=function(){u(this,"--clearable",this.clearable&&(e(this,xe,"f")?.value??"").length>0)},We=function(){this.clear(),e(this,xe,"f")?.focus()},g(O),Te.styles=Q,i([c({type:Boolean,reflect:!0})],Te.prototype,"clearable",void 0),i([c({attribute:"clear-label"})],Te.prototype,"clearLabel",void 0),Te=i([v("m3e-search-bar")],Te);let ht=class extends(b(m(n))){constructor(){super(),qe.add(this),Be.set(this,void 0),He.set(this,!1),Pe.set(this,()=>e(this,qe,"m",Ne).call(this)),Xe.set(this,()=>e(this,qe,"m",et).call(this)),Ze.set(this,t=>e(this,qe,"m",st).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 k(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",Qe).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,Ye,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,qe,"m",Ge).call(this)}willUpdate(t){if(super.willUpdate(t),t.has("mode")){e(this,Ye,"f")?.call(this);const i=t.get("mode");i&&i!==this.mode&&this.open&&(this.open=!1),"auto"===this.mode?e(this,qe,"m",Ge).call(this):(this._mode=void 0,e(this,qe,"m",Oe).call(this))}t.has("_mode")&&e(this,qe,"m",Oe).call(this)}updated(t){super.updated(t),t.has("open")&&(this.open?"fullscreen"===this.currentMode?e(this,qe,"m",ct).call(this):e(this,qe,"m",at).call(this):"fullscreen"===(e(this,Fe,"f")??this.currentMode)?e(this,qe,"m",dt).call(this):e(this,qe,"m",rt).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",nt)}"><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",Je)}"></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",tt)}"><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",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>`},Ge=function(){t(this,Ye,L.observe([S.XSmall],t=>{const i=this.currentMode;this._mode=t.get(S.XSmall)?"fullscreen":"docked",i!==this._mode&&this.open&&(this.open=!1),e(this,qe,"m",Oe).call(this)}),"f")},Je=function(i){const o=i.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);o!=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,o,"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",Qe).call(this))},Ne=function(){e(this,qe,"m",Qe).call(this),this.open?this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0})):this.open=!0},Oe=function(){u(this,"--fullscreen","fullscreen"===this.currentMode),u(this,"--docked","docked"===this.currentMode)},Qe=function(){this._clearable=(e(this,Be,"f")?.value??"").length>0,u(this,"--clearable",this._clearable)},et=function(){this.open=!e(this,He,"f"),t(this,He,!1,"f")},tt=function(){e(this,Be,"f")&&(e(this,Be,"f").value&&this.clear(),t(this,He,!0,"f"),e(this,Be,"f")?.focus())},it=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)},st=function(e){if(this.open&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey){e.preventDefault();e.target.value&&this.clear(),this.open=!1}},nt=function(t){!this.open||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),e(this,qe,"m",tt).call(this))},at=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 i=this._view;e(this,Re,"f")?.call(this),t(this,Re,await _(i,this._anchor,{position:"bottom"},(e,t)=>{const i=this._view;i.style.top=t-this._anchor.clientHeight+"px",i.style.width=`${this._anchor.clientWidth}px`,"rtl"===M.current?(i.style.right=window.innerWidth-e-this.clientWidth+"px",i.style.left=""):(i.style.left=`${e}px`,i.style.right="")}),"f"),this._anchor.style.position="relative",i.popover="manual",i.style.position="absolute",i.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}))},rt=function(){const i=this._view;"manual"===i.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(),y()?e(this,qe,"m",lt).call(this):(i.classList.add("closing"),i.addEventListener("transitionend",()=>e(this,qe,"m",lt).call(this),{once:!0}))):this.open=!0)},lt=function(){e(this,Re,"f")?.call(this),t(this,Re,void 0,"f");const i=this._view;i.classList.remove("closing"),i.style.position="",i.style.width="",i.style.top="",i.style.left="",i.style.right="",i.hidePopover(),i.popover=null,this._anchor.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},ct=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 i=this._view;if(e(this,Re,"f")?.call(this),y())i.style.position="fixed",i.popover="manual",i.showPopover(),this._anchor.style.position="relative";else{const e=i.getBoundingClientRect(),t="rtl"===M.current?window.innerWidth-e.right:e.left;i.style.position="fixed",i.popover="manual",i.showPopover(),this._anchor.style.position="relative",i.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}))},dt=async function(){const i=this._view;if("manual"!==i.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 o=this._anchor;if(!y()){const e=i.getBoundingClientRect(),t=o.getBoundingClientRect(),s="rtl"===M.current?window.innerWidth-e.right:e.left,n="rtl"===M.current?window.innerWidth-t.right:t.left,a="rtl"===M.current?s-n:n-s;i.classList.add("closing"),await i.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}i.hidePopover(),i.style.position="",i.popover=null,i.classList.remove("closing"),o.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},g($e),ht.styles=ke,i([d()],ht.prototype,"_clearable",void 0),i([d()],ht.prototype,"_mode",void 0),i([h(".anchor")],ht.prototype,"_anchor",void 0),i([h(".view")],ht.prototype,"_view",void 0),i([c({type:Boolean,reflect:!0})],ht.prototype,"contained",void 0),i([c({reflect:!0})],ht.prototype,"mode",void 0),i([c({type:Boolean,reflect:!0})],ht.prototype,"open",void 0),i([c({attribute:"clear-label"})],ht.prototype,"clearLabel",void 0),i([c({attribute:"close-label"})],ht.prototype,"closeLabel",void 0),i([c({attribute:"hide-search-icon",type:Boolean})],ht.prototype,"hideSearchIcon",void 0),i([x(40)],ht.prototype,"_handleFocusChange",null),ht=i([v("m3e-search-view")],ht);export{Te as M3eSearchBarElement,ht 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])) .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)) .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 { AttachInternals, customElement, hasAssignedNodes, registerStyleSheet, setCustomState } 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 AttachInternals(LitElement) {\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  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 ReconnectedCallback(AttachInternals(LitElement)) {\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","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":";;;;;g0BAKO,MAAMA,EACKC,EAAU,yCAAyCC,EAAYC,MAAMC,yBAD1EJ,EAEOC,EAAU,4CAA4CC,EAAYC,MAAME,cAF/EL,EAGQC,EAAU,6CAA6CC,EAAYC,MAAMG,qBAHjFN,EAIMC,EAAU,kDAJhBD,EAKKC,EAAU,yCAAyCC,EAAYK,MAAMC,OAAOC,SALjFT,EAMDC,EAAU,2CANTD,EAOUC,EAAU,+CAA+CC,EAAYC,MAAMG,qBAPrFN,EAQaC,EACtB,mDAAmDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMC,aATpFd,EAWeC,EACxB,qDAAqDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAME,eAZtFf,EAceC,EACxB,qDAAqDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMG,eAftFhB,EAiBaC,EACtB,kDAAkDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMI,aAlBnFjB,EAoBCC,EAAU,qCAAqCC,EAAYC,MAAME,cApBlEL,EAqBQC,EACjB,8CAA8CC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMC,aAtB/Ed,EAwBUC,EACnB,gDAAgDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAME,eAzBjFf,EA2BUC,EACnB,gDAAgDC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMG,eA5BjFhB,EA8BQC,EACjB,6CAA6CC,EAAYQ,UAAUC,SAASC,KAAKC,MAAMI,aA/B9EjB,EAiCGC,EAAU,gDAjCbD,EAkCIC,EAAU,iDAlCdD,EAmCYC,EAAU,wDAnCtBD,EAoCaC,EAAU,yDApCvBD,EAqCkBC,EAAU,iEArC5BD,EAsCkBC,EAAU,iEAtC5BD,EAuCCC,EAAU,0CCpCXiB,EAAyBC,CAAG,+EAG5BnB,iBACIA,mBACEA,mBACAA,sBACGA,OAQToB,EAAiCD,CAAG,mCAGnCnB,oIASOA,wBACGA,qbAoBQA,0KAUnBA,iBACIA,mBACEA,mBACAA,sBACGA,mEAGMA,yEAGAA,2FAGFA,iGAGAA,sFAGCA,8GAGFA,sCAGZA,wBACWA,oCACYA,uBACbA,+CAIVA,wBACWA,oCACYA,uBACbA,iGAKNA,6EAKAA,8DAGMA,iIC7GVqB,GACKpB,EAAU,0CAA0CC,EAAYC,MAAMC,yBAD3EiB,GAEcpB,EACvB,oDAAoDC,EAAYC,MAAMmB,wBAH7DD,GAKGpB,EAAU,wCAAwCC,EAAYC,MAAMoB,YALvEF,GAMOpB,EAAU,iDANjBoB,GAOepB,EACxB,sDAAsDC,EAAYK,MAAMC,OAAOgB,SARtEH,GAUsBpB,EAAU,sEAVhCoB,GAWWpB,EACpB,iDAAiDC,EAAYK,MAAMC,OAAOiB,eAZjEJ,GAckBpB,EAAU,iEAd5BoB,GAeapB,EAAU,2DAfvBoB,GAgBcpB,EAAU,6DAhBxBoB,GAiBoBpB,EAAU,oEAjB9BoB,GAkBqBpB,EAAU,qEAlB/BoB,GAmBmBpB,EAAU,gEAnB7BoB,IAoBkBpB,EAC3B,yDAAyDC,EAAYK,MAAMC,OAAOkB,WAE3DzB,EACvB,qDAAqDC,EAAYK,MAAMC,OAAOC,SAEzCR,EACrC,8EA3BSoB,GA6BepB,EAAU,6DA7BzBoB,GA8BepB,EAAU,4EA9BzBoB,GA+BkBpB,EAAU,kEA/B5BoB,GAgCepB,EAAU,4DAhCzBoB,GAiCOpB,EAAU,6CAA6CC,EAAYC,MAAMwB,UAjChFN,GAkCSpB,EAAU,oDC5BnB2B,GAA0BT,CAAG,gFAG7BnB,iBACIA,mBACEA,mBACAA,sBACGA,OAQT6B,GAAkCV,CAAG,+ZAgChClB,EAAU,UAAUC,EAAY4B,OAAOC,SAASC,UAAU9B,EAAY4B,OAAOG,OAAOtB,gGAG3EU,0BACFA,uIAIEA,0BACFA,6OAcRrB,oMAYME,EAAYgC,UAAU/B,qOAY5BH,8DAGMA,kLAMTqB,0HAIAA,oFAG2BA,sDAG3BA,wEAGOA,sFAGGA,4FAGAA,wFAIVA,qEAGUA,kDAEAA,kEAGNA,iFAGMA,yCACgBA,wEAGhBA,oHAIHA,4DAGEA,QAA8CA,yBAC9CA,QAA8CA,sEAG9CnB,EAAYgC,UAAUC,4FAGvBd,wEAGPA,8EAIGpB,EACZ,aAAaC,EAAY4B,OAAOC,SAASC,UAAU9B,EAAY4B,OAAOG,OAAOtB,4BACnET,EAAY4B,OAAOC,SAASC,UAAU9B,EAAY4B,OAAOG,OAAOtB,2CAChET,EAAY4B,OAAOC,SAASC,UAAU9B,EAAY4B,OAAOG,OAAOtB,sXAkB9DV,EACZ,iBAAiBC,EAAY4B,OAAOC,SAASK,SAASlC,EAAY4B,OAAOG,OAAOtB,qCAC7DT,EAAY4B,OAAOC,SAASK,SAASlC,EAAY4B,OAAOG,OAAOtB,mFAItEV,EACZ,oBAAoBC,EAAY4B,OAAOC,SAASM,UAAUnC,EAAY4B,OAAOG,OAAOtB,+BACxET,EAAY4B,OAAOC,SAASM,UAAUnC,EAAY4B,OAAOG,OAAOtB,gDAC7DT,EAAY4B,OAAOC,SAASM,UAAUnC,EAAY4B,OAAOG,OAAOtB,+GAI1CU,yIAMnCA,MAAoCA,kCAG1BpB,EACZ,oBAAoBC,EAAY4B,OAAOC,SAASK,SAASlC,EAAY4B,OAAOG,OAAOtB,+BACvET,EAAY4B,OAAOC,SAASK,SAASlC,EAAY4B,OAAOG,OAAOtB,gDAC5DT,EAAY4B,OAAOC,SAASK,SAASlC,EAAY4B,OAAOG,OAAOtB,uIAKvCU,+yBC/JtC,IAAMiB,GAAN,cAAkCC,EAAgBC,IAAlDC,WAAAA,oCAQWC,GAAAC,IAAAC,aACSC,GAAAF,IAAAC,KAAqB,IAAME,EAAAF,KAAIG,GAAA,IAAAC,IAAkBC,KAAtBL,OAMRA,KAAAM,WAAY,EAMhBN,KAAAO,WAAa,OAwFvD,CArFEC,KAAAA,GACON,EAAAF,KAAIF,GAAA,OACTI,EAAAF,KAAIF,GAAA,KAAQW,MAAQ,GACpBP,EAAAF,KAAIG,GAAA,IAAAC,IAAkBC,KAAtBL,MAEAA,KAAKU,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,KACnE,CAGmBC,MAAAA,GACjB,OAAOC,CAAI,6BACmBb,EAAAF,KAAIG,GAAA,IAAAa,0CACMd,EAAAF,KAAIG,GAAA,IAAAc,+CACNf,EAAAF,KAAIG,GAAA,IAAAe,eACpChB,EAAAF,KAAIG,GAAA,IAAAgB,IAAmBd,KAAvBL,2CACmCE,EAAAF,KAAIG,GAAA,IAAAiB,oBAG/C,kKAIE,OAAOpB,KAAKM,UACRS,CAAI,mDAC6Bf,KAAKO,uBAAuBL,EAAAF,KAAIG,GAAA,IAAAkB,uPAUjEC,CACN,gBAIOtB,KAAKuB,QAAQ,kBAChBrB,EAAAF,KAAIF,GAAA,MAAS0B,OAEjB,cAGyBC,GACvBC,EAAe1B,KAAM,gBAAiB2B,EAAiBF,EAAEG,QAC3D,cAG0BH,GACxBC,EAAe1B,KAAM,iBAAkB2B,EAAiBF,EAAEG,QAC5D,cAGuBH,GACrB,MAAMI,EAASJ,EAAEG,OACdE,iBAAiB,CAAEC,SAAS,IAC5BC,KAAMC,GAAMA,aAAaC,kBAExBL,GAAS3B,EAAAF,KAAIF,GAAA,OACfI,EAAAF,KAAIF,GAAA,MAASqC,oBAAoB,QAASjC,EAAAF,KAAIC,GAAA,MAC9CmC,EAAApC,KAAIF,GAAU+B,EAAK,KACnB3B,EAAAF,KAAIF,GAAA,MAASuC,iBAAiB,QAASnC,EAAAF,KAAIC,GAAA,MAEvCC,EAAAF,KAAIF,GAAA,OACNI,EAAAF,KAAIF,GAAA,KAAQwC,KAAOpC,EAAAF,KAAIF,GAAA,KAAQwC,MAAQ,YACvCpC,EAAAF,KAAIF,GAAA,KAAQyC,UAAYrC,EAAAF,KAAIF,GAAA,KAAQyC,WAAa,SACjDrC,EAAAF,KAAIF,GAAA,KAAQ0C,KAAO,QAGrBtC,EAAAF,KAAIG,GAAA,IAAAC,IAAkBC,KAAtBL,MAEJ,gBAIE0B,EAAe1B,KAAM,aAAcA,KAAKM,YAAcJ,EAAAF,KAAIF,GAAA,MAASW,OAAS,IAAIgC,OAAS,EAC3F,gBAIEzC,KAAKQ,QACLN,EAAAF,KAAIF,GAAA,MAAS0B,OACf,EA1GEkB,EAAmBpE,GAILoB,GAAAiD,OAASnE,EASmBoE,EAAA,CAA3CC,EAAS,CAAEL,KAAMM,QAASC,SAAS,KAA0BrD,GAAAsD,UAAA,iBAAA,GAMtBJ,EAAA,CAAvCC,EAAS,CAAEI,UAAW,iBAAsCvD,GAAAsD,UAAA,kBAAA,GArBlDtD,GAAmBkD,EAAA,CAD/BM,EAAc,mBACFxD,ICkCN,IAAMyD,GAAN,cAAmCC,EAAoBzD,EAAgBC,KA2B5EC,WAAAA,GACEwD,qBApBcC,GAAAvD,IAAAC,aACAuD,GAAAxD,IAAAC,MAAqB,GACZwD,GAAAzD,IAAAC,KAAqB,IAAME,EAAAF,KAAIyD,GAAA,IAAAC,IAAkBrD,KAAtBL,OAC3B2D,GAAA5D,IAAAC,KAAqB,IAAME,EAAAF,KAAIyD,GAAA,IAAAG,IAAkBvD,KAAtBL,OAC3B6D,GAAA9D,IAAAC,KAAwByB,GAAqBvB,EAAAF,gBAAwBK,KAAxBL,KAAyByB,IACtEqC,GAAA/D,IAAAC,KAAuB,IAAME,EAAAF,KAAIyD,GAAA,IAAAM,IAAwB1D,KAA5BL,OAE7BgE,GAAAjE,IAAAC,KAAwB,IAAIiE,EAAqBjE,OACjDkE,GAAAnE,IAAAC,KAAmB,IAAImE,EAAgBnE,OAE/BA,KAAAoE,YAAa,EAE9BC,GAAAtE,IAAAC,aAEAsE,GAAAvE,IAAAC,aACAuE,GAAAxE,IAAAC,aAgB4BA,KAAAwE,WAAY,EAM3BxE,KAAAyE,KAAuB,SAMRzE,KAAA0E,MAAO,EAMX1E,KAAAO,WAAa,QAMbP,KAAA2E,WAAa,QAMO3E,KAAA4E,gBAAiB,EAvC3E,IAAIC,EAAgB7E,KAAM,CACxB8E,SAAWC,GAAY/E,KAAKgF,mBAAmBD,IAEnD,CAuCA,eAAIE,GACF,OAAOjF,KAAKkF,QAAwB,eAAdlF,KAAKyE,KAAwB,SAAW,aAChE,CACA,eAAIQ,CAAYxE,GACdT,KAAKkF,MAAQzE,CACf,CAGAD,KAAAA,GACON,EAAAF,KAAIsD,GAAA,OACTpD,EAAAF,KAAIsD,GAAA,KAAQ7C,MAAQ,GACpBP,EAAAF,KAAIyD,GAAA,IAAA0B,IAAsB9E,KAA1BL,MAEAA,KAAKU,cACH,IAAI0E,YAAwC,QAAS,CACnDC,OAAQ,CAAEC,KAAM,IAChB1E,SAAS,EACTC,UAAU,KAIdb,KAAKU,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,KACnE,CAGS0E,oBAAAA,GACPlC,MAAMkC,uBAENvF,KAAKkF,WAAQM,EACbtF,EAAAF,KAAIuE,GAAA,MAAuBlE,KAA3BL,KACF,CAGSyF,mBAAAA,GACPpC,MAAMoC,sBAEY,SAAdzF,KAAKyE,MACPvE,EAAAF,KAAIyD,GAAA,IAAAiC,IAA0BrF,KAA9BL,KAEJ,CAGmB2F,UAAAA,CAAWC,GAG5B,GAFAvC,MAAMsC,WAAWC,GAEbA,EAAkBC,IAAI,QAAS,CACjC3F,EAAAF,KAAIuE,GAAA,MAAuBlE,KAA3BL,MAEA,MAAM8F,EAAeF,EAAkBG,IAAI,QACvCD,GAAgBA,IAAiB9F,KAAKyE,MAAQzE,KAAK0E,OACrD1E,KAAK0E,MAAO,GAGI,SAAd1E,KAAKyE,KACPvE,EAAAF,KAAIyD,GAAA,IAAAiC,IAA0BrF,KAA9BL,OAEAA,KAAKkF,WAAQM,EACbtF,EAAAF,KAAIyD,GAAA,IAAAuC,IAAY3F,KAAhBL,MAEJ,CACI4F,EAAkBC,IAAI,UACxB3F,EAAAF,KAAIyD,GAAA,IAAAuC,IAAY3F,KAAhBL,KAEJ,CAGmBiG,OAAAA,CAAQC,GACzB7C,MAAM4C,QAAQC,GACVA,EAAmBL,IAAI,UACpB7F,KAAK0E,KAOiB,eAArB1E,KAAKiF,YACP/E,EAAAF,KAAIyD,GAAA,IAAA0C,IAAgB9F,KAApBL,MAEAE,EAAAF,KAAIyD,GAAA,IAAA2C,IAAY/F,KAAhBL,MAT2C,gBAAxCE,EAAAF,KAAIqE,GAAA,MAAcrE,KAAKiF,aAC1B/E,EAAAF,KAAIyD,GAAA,IAAA4C,IAAiBhG,KAArBL,MAEAE,EAAAF,KAAIyD,GAAA,IAAA6C,IAAajG,KAAjBL,MAUR,CAGmBc,MAAAA,GACjB,OAAOC,CAAI,0DAGCwF,EAAUvG,KAAK0E,KAAO,cAAWc,mBAC3Be,EAAUvG,KAAK0E,KAAO,YAASc,wBAC1Be,EAAUvG,KAAK0E,KAAO,cAAWc,4CAGxCtF,EAAAF,KAAIyD,GAAA,IAAA+C,oCAEcxG,KAAK0E,qEAG3BxE,EAAAF,KAAIyD,GAAA,IAAAgD,IAAwBpG,KAA5BL,SACAA,KAAK0E,KACH3D,CAAI,mDACJA,CAAI,oGACuCb,EAAAF,KAAIyD,GAAA,IAAAiD,eACjDxG,EAAAF,KAAIyD,GAAA,IAAAkD,IAAmBtG,KAAvBL,SACAA,KAAK0E,KACH3D,CAAI,qDACJA,CAAI,wLAWpB,CAqLQiE,kBAAAA,CAAmBD,GACpBA,GAAgC,WAArB/E,KAAKiF,cACnBjF,KAAKQ,QACLR,KAAK0E,MAAO,EAEhB,qMAtLE,OAAK1E,KAAK0E,MAAQ1E,KAAK4E,eAAuBtD,EACvCP,CAAI,oCAAoCf,KAAK0E,KAAOxE,EAAAF,KAAIyD,GAAA,IAAAmD,SAAJ5G,MAA2BE,EAAAF,KAAIyD,GAAA,IAAAoD,IAAYxG,KAAhBL,aACxF,gBAIE,OAAOe,CAAI,qXAOb,gBAIE,OAAOA,CAAI,6DAGKf,KAAK2E,uBACTzE,EAAAF,KAAIyD,GAAA,IAAAqD,qGAIa,WAArB9G,KAAKiF,YACH8B,CAAG,+EACHA,CAAG,oGAIf,gBAIE,OAAOhG,CAAI,8DAGKf,KAAK0E,OAAS1E,KAAKoE,WAAapE,KAAK2E,WAAa3E,KAAKO,uBAC3DL,EAAAF,KAAIyD,GAAA,IAAAuD,gPAQlB,gBAIE5E,EAAApC,KAAIuE,GAAwB0C,EAAsBC,QAAQ,CAACC,EAAWC,QAAU7F,IAC9E,MAAM0D,EAAcjF,KAAKiF,YACzBjF,KAAKkF,MAAQ3D,EAAQwE,IAAIoB,EAAWC,QAAU,aAAe,SACzDnC,IAAgBjF,KAAKkF,OAASlF,KAAK0E,OACrC1E,KAAK0E,MAAO,GAEdxE,EAAAF,KAAIyD,GAAA,IAAAuC,IAAY3F,KAAhBL,YAEJ,cAGuByB,GACrB,MAAMI,EAASJ,EAAEG,OACdE,iBAAiB,CAAEC,SAAS,IAC5BC,KAAMC,GAAMA,aAAaC,kBAExBL,GAAS3B,EAAAF,KAAIsD,GAAA,OACfpD,EAAAF,KAAIsD,GAAA,MAASnB,oBAAoB,QAASjC,EAAAF,KAAIwD,GAAA,MAC9CtD,EAAAF,KAAIsD,GAAA,MAASnB,oBAAoB,QAASjC,EAAAF,KAAI2D,GAAA,MAC9CzD,EAAAF,KAAIsD,GAAA,MAASnB,oBAAoB,UAAWjC,EAAAF,KAAI6D,GAAA,MAChD3D,EAAAF,KAAIsD,GAAA,MAASnB,oBAAoB,cAAejC,EAAAF,KAAI8D,GAAA,MAEpD1B,EAAApC,KAAIsD,GAAUzB,EAAK,KAEnB3B,EAAAF,KAAIsD,GAAA,MAASjB,iBAAiB,QAASnC,EAAAF,KAAIwD,GAAA,MAC3CtD,EAAAF,KAAIsD,GAAA,MAASjB,iBAAiB,QAASnC,EAAAF,KAAI2D,GAAA,MAC3CzD,EAAAF,KAAIsD,GAAA,MAASjB,iBAAiB,UAAWnC,EAAAF,KAAI6D,GAAA,MAC7C3D,EAAAF,KAAIsD,GAAA,MAASjB,iBAAiB,cAAenC,EAAAF,KAAI8D,GAAA,MAE7C5D,EAAAF,KAAIsD,GAAA,OACNpD,EAAAF,KAAIsD,GAAA,KAAQhB,KAAOpC,EAAAF,KAAIsD,GAAA,KAAQhB,MAAQ,YACvCpC,EAAAF,KAAIsD,GAAA,KAAQf,UAAYrC,EAAAF,KAAIsD,GAAA,KAAQf,WAAa,SACjDrC,EAAAF,KAAIsD,GAAA,KAAQd,KAAO,OACnBtC,EAAAF,KAAIsD,GAAA,KAAQ+D,aAAe,UAG7BnH,EAAAF,KAAIyD,GAAA,IAAA0B,IAAsB9E,KAA1BL,MAEJ,gBAIEE,EAAAF,KAAIyD,GAAA,IAAA0B,IAAsB9E,KAA1BL,MACIA,KAAK0E,KACP1E,KAAKU,cACH,IAAI0E,YAAwC,QAAS,CACnDC,OAAQ,CAAEC,KAAMpF,EAAAF,KAAIsD,GAAA,MAAS7C,OAAS,IACtCG,SAAS,EACTC,UAAU,KAIdb,KAAK0E,MAAO,CAEhB,gBAIEhD,EAAe1B,KAAM,cAAoC,eAArBA,KAAKiF,aACzCvD,EAAe1B,KAAM,UAAgC,WAArBA,KAAKiF,YACvC,gBAIEjF,KAAKoE,YAAclE,EAAAF,KAAIsD,GAAA,MAAS7C,OAAS,IAAIgC,OAAS,EACtDf,EAAe1B,KAAM,aAAcA,KAAKoE,WAC1C,gBAIEpE,KAAK0E,MAAQxE,EAAAF,aACboC,EAAApC,KAAIuD,IAAsB,EAAK,IACjC,gBAIOrD,EAAAF,KAAIsD,GAAA,OACLpD,EAAAF,KAAIsD,GAAA,KAAQ7C,OACdT,KAAKQ,QAEP4B,EAAApC,KAAIuD,IAAsB,EAAI,KAC9BrD,EAAAF,KAAIsD,GAAA,MAAS9B,QACf,gBAIOtB,EAAAF,KAAIsD,GAAA,OACLpD,EAAAF,KAAIsD,GAAA,KAAQ7C,MACdT,KAAKQ,QAEL4B,EAAApC,KAAIuD,IAAsB,EAAI,KAEhCrD,EAAAF,KAAIsD,GAAA,MAAS9B,QACf,iBAIOxB,KAAK0E,MAAQxE,EAAAF,KAAIsD,GAAA,MAAS/B,QAAQ,YACrCvB,KAAK0E,MAAO,EAEhB,cAGoBjD,GAClB,GAAIzB,KAAK0E,MAAkB,WAAVjD,EAAE6F,MAAqB7F,EAAE8F,WAAa9F,EAAE+F,QAAS,CAChE/F,EAAEgG,iBAEYhG,EAAEG,OACNnB,OACRT,KAAKQ,QAGPR,KAAK0E,MAAO,CACd,CACF,cAGejD,IACTzB,KAAK0E,MAAkB,WAAVjD,EAAE6F,KAAqB7F,EAAE8F,UAAa9F,EAAE+F,UACvD/F,EAAEgG,iBACFvH,EAAAF,KAAIyD,GAAA,IAAAqD,IAAkBzG,KAAtBL,MAEJ,KAYA0H,iBACE,IACG1H,KAAKU,cACJ,IAAIiH,YAAY,eAAgB,CAC9BC,SAAU,SACVC,SAAU,OACVjH,SAAS,EACTC,UAAU,EACViH,YAAY,KAKhB,YADA9H,KAAK0E,MAAO,GAIdtC,EAAApC,KAAIqE,GAAarE,KAAKiF,iBACtB,MAAM8C,EAAO/H,KAAKgI,MAElB9H,EAAAF,KAAIsE,GAAA,MAAiBjE,KAArBL,MACAoC,EAAApC,KAAIsE,SAAwB2D,EAC1BF,EACA/H,KAAKkI,QACL,CACEC,SAAU,UAEZ,CAAClG,EAAGmG,KACF,MAAML,EAAO/H,KAAKgI,MAClBD,EAAKM,MAAMC,IAASF,EAAIpI,KAAKkI,QAAQK,aAApB,KACjBR,EAAKM,MAAMG,MAAQ,GAAGxI,KAAKkI,QAAQO,gBAED,QAA9BC,EAAkBC,SACpBZ,EAAKM,MAAMO,MAAWC,OAAOC,WAAa7G,EAAIjC,KAAKyI,YAAhC,KACnBV,EAAKM,MAAMU,KAAO,KAElBhB,EAAKM,MAAMU,KAAO,GAAG9G,MACrB8F,EAAKM,MAAMO,MAAQ,WAKzB5I,KAAKkI,QAAQG,MAAMF,SAAW,WAC9BJ,EAAKiB,QAAU,SACfjB,EAAKM,MAAMF,SAAW,WACtBJ,EAAKkB,cACL/I,EAAAF,KAAIgE,GAAA,KAAuBkF,OAC3BhJ,EAAAF,KAAIkE,GAAA,KAAkBgF,OAEtBlJ,KAAKU,cACH,IAAIiH,YAAY,SAAU,CACxBC,SAAU,SACVC,SAAU,OACVjH,SAAS,EACTC,UAAU,KAIdb,KAAKU,cACH,IAAI0E,YAAwC,QAAS,CACnDC,OAAQ,CAAEC,KAAMpF,EAAAF,KAAIsD,GAAA,MAAS7C,OAAS,IACtCG,SAAS,EACTC,UAAU,IAGhB,gBAIE,MAAMkH,EAAO/H,KAAKgI,MACG,WAAjBD,EAAKiB,UAENhJ,KAAKU,cACJ,IAAIiH,YAAY,eAAgB,CAC9BC,SAAU,OACVC,SAAU,SACVjH,SAAS,EACTC,UAAU,EACViH,YAAY,MAQlB1F,EAAApC,KAAIqE,QAAamB,EAAS,KAC1BtF,EAAAF,KAAIgE,GAAA,KAAuBmF,SAC3BjJ,EAAAF,KAAIkE,GAAA,KAAkBiF,SAElBC,IACFlJ,EAAAF,KAAIyD,GAAA,IAAA4F,IAAYhJ,KAAhBL,OAEA+H,EAAKuB,UAAUC,IAAI,WACnBxB,EAAK1F,iBAAiB,gBAAiB,IAAMnC,EAAAF,gBAAgBK,KAAhBL,MAAoB,CAAEwJ,MAAM,MAZzExJ,KAAK0E,MAAO,EAchB,gBAIExE,EAAAF,KAAIsE,GAAA,MAAiBjE,KAArBL,MACAoC,EAAApC,KAAIsE,QAAkBkB,EAAS,KAE/B,MAAMuC,EAAO/H,KAAKgI,MAClBD,EAAKuB,UAAUG,OAAO,WACtB1B,EAAKM,MAAMF,SAAW,GACtBJ,EAAKM,MAAMG,MAAQ,GACnBT,EAAKM,MAAMC,IAAM,GACjBP,EAAKM,MAAMU,KAAO,GAClBhB,EAAKM,MAAMO,MAAQ,GACnBb,EAAK2B,cACL3B,EAAKiB,QAAU,KACfhJ,KAAKkI,QAAQG,MAAMF,SAAW,GAE9BnI,KAAKU,cACH,IAAIiH,YAAY,SAAU,CACxBC,SAAU,OACVC,SAAU,SACVjH,SAAS,EACTC,UAAU,IAGhB,KAGA6G,iBACE,IACG1H,KAAKU,cACJ,IAAIiH,YAAY,eAAgB,CAC9BC,SAAU,SACVC,SAAU,OACVjH,SAAS,EACTC,UAAU,EACViH,YAAY,KAKhB,YADA9H,KAAK0E,MAAO,GAIdtC,EAAApC,KAAIqE,GAAarE,KAAKiF,iBACtB/E,EAAAF,KAAIgE,GAAA,KAAuBkF,OAC3BhJ,EAAAF,KAAIkE,GAAA,KAAkBgF,OAEtB,MAAMnB,EAAO/H,KAAKgI,MAGlB,GAFA9H,EAAAF,KAAIsE,GAAA,MAAiBjE,KAArBL,MAEKoJ,IAyBHrB,EAAKM,MAAMF,SAAW,QACtBJ,EAAKiB,QAAU,SACfjB,EAAKkB,cACLjJ,KAAKkI,QAAQG,MAAMF,SAAW,eA5BH,CAC3B,MAAMwB,EAAO5B,EAAK6B,wBACZC,EAA4C,QAA9BnB,EAAkBC,QAAoBE,OAAOC,WAAaa,EAAKf,MAAQe,EAAKZ,KAEhGhB,EAAKM,MAAMF,SAAW,QACtBJ,EAAKiB,QAAU,SACfjB,EAAKkB,cACLjJ,KAAKkI,QAAQG,MAAMF,SAAW,WAE9BJ,EAAK+B,QACH,CACE,CACEC,UAAW,cAAcF,OACzBrB,MAAO,GAAGmB,EAAKnB,UACfF,IAAK,GAAGqB,EAAKrB,QACb0B,OAAQ,GAAGL,EAAKK,YAElB,CAAED,UAAW,kBAAmBvB,MAAO,QAASF,IAAK,MAAO0B,OAAQ,UAEtE,CACE7K,SAAU,IACVE,OAAQ,kCAGd,CAOAW,KAAKU,cACH,IAAIiH,YAAY,SAAU,CACxBC,SAAU,SACVC,SAAU,OACVjH,SAAS,EACTC,UAAU,KAIdb,KAAKU,cACH,IAAI0E,YAAwC,QAAS,CACnDC,OAAQ,CAAEC,KAAMpF,EAAAF,KAAIsD,GAAA,MAAS7C,OAAS,IACtCG,SAAS,EACTC,UAAU,IAGhB,KAGA6G,iBACE,MAAMK,EAAO/H,KAAKgI,MAClB,GAAqB,WAAjBD,EAAKiB,QAAsB,OAE/B,IACGhJ,KAAKU,cACJ,IAAIiH,YAAY,eAAgB,CAC9BC,SAAU,OACVC,SAAU,SACVjH,SAAS,EACTC,UAAU,EACViH,YAAY,KAKhB,YADA9H,KAAK0E,MAAO,GAIdtC,EAAApC,KAAIqE,QAAamB,EAAS,KAC1BtF,EAAAF,KAAIgE,GAAA,KAAuBmF,SAC3BjJ,EAAAF,KAAIkE,GAAA,KAAkBiF,SAEtB,MAAMc,EAASjK,KAAKkI,QAEpB,IAAKkB,IAAwB,CAC3B,MAAMc,EAAQnC,EAAK6B,wBACbO,EAAMF,EAAOL,wBAEbC,EAA4C,QAA9BnB,EAAkBC,QAAoBE,OAAOC,WAAaoB,EAAMtB,MAAQsB,EAAMnB,KAC5FqB,EAA0C,QAA9B1B,EAAkBC,QAAoBE,OAAOC,WAAaqB,EAAIvB,MAAQuB,EAAIpB,KACtFsB,EAAmC,QAA9B3B,EAAkBC,QAAoBkB,EAAcO,EAAYA,EAAYP,EAEvF9B,EAAKuB,UAAUC,IAAI,iBACbxB,EAAK+B,QACT,CACE,CACEC,UAAW,kBACXvB,MAAO,GAAG0B,EAAM1B,UAChBF,IAAK,GAAG4B,EAAM5B,QACd0B,OAAQ,GAAGE,EAAMF,YAEnB,CACED,UAAW,cAAcM,OACzB7B,MAAO,GAAG2B,EAAI3B,UACdF,IAAK,GAAG6B,EAAI7B,QACZ0B,OAAQ,GAAGG,EAAIH,aAGnB,CACE7K,SAAU,IACVE,OAAQ,mCAEViL,QACJ,CAEAvC,EAAK2B,cACL3B,EAAKM,MAAMF,SAAW,GACtBJ,EAAKiB,QAAU,KACfjB,EAAKuB,UAAUG,OAAO,WACtBQ,EAAO5B,MAAMF,SAAW,GAExBnI,KAAKU,cACH,IAAIiH,YAAY,SAAU,CACxBC,SAAU,OACVC,SAAU,SACVjH,SAAS,EACTC,UAAU,IAGhB,EAroBE6B,EAAmB1D,IAILmE,GAAAR,OAAS1D,GAYQ2D,EAAA,CAAhB2H,KAAmCpH,GAAAH,UAAA,qBACnBJ,EAAA,CAAhB2H,KAAwDpH,GAAAH,UAAA,gBAKtBJ,EAAA,CAAlC4H,EAAM,YAAkDrH,GAAAH,UAAA,kBACxBJ,EAAA,CAAhC4H,EAAM,UAA8CrH,GAAAH,UAAA,gBAczBJ,EAAA,CAA3CC,EAAS,CAAEL,KAAMM,QAASC,SAAS,KAA0BI,GAAAH,UAAA,iBAAA,GAMjCJ,EAAA,CAA5BC,EAAS,CAAEE,SAAS,KAAwCI,GAAAH,UAAA,YAAA,GAMjBJ,EAAA,CAA3CC,EAAS,CAAEL,KAAMM,QAASC,SAAS,KAAqBI,GAAAH,UAAA,YAAA,GAMjBJ,EAAA,CAAvCC,EAAS,CAAEI,UAAW,iBAAsCE,GAAAH,UAAA,kBAAA,GAMrBJ,EAAA,CAAvCC,EAAS,CAAEI,UAAW,iBAAsCE,GAAAH,UAAA,kBAAA,GAMDJ,EAAA,CAA3DC,EAAS,CAAEI,UAAW,mBAAoBT,KAAMM,WAAkCK,GAAAH,UAAA,sBAAA,GA+S3EJ,EAAA,CADP6H,EAAS,KAMTtH,GAAAH,UAAA,qBAAA,MAzXUG,GAAoBP,EAAA,CADhCM,EAAc,oBACFC"}
+{"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(:is(:state(--clearable), :--clearable))) .clear {\r\n    display: none;\r\n  }\r\n  :host(:is(:state(--with-leading), :--with-leading)) slot[name=\"leading\"],\r\n  :host(:is(:state(--with-trailing), :--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(:is(:state(--with-leading), :--with-leading)) .base {\r\n    padding-inline-start: ${SearchBarToken.leadingSpace};\r\n  }\r\n  :host(:not(:is(:state(--with-leading), :--with-leading))) .base {\r\n    padding-inline-start: ${SearchBarToken.noActionsLeadingSpace};\r\n  }\r\n  :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable))) .base {\r\n    padding-inline-end: ${SearchBarToken.trailingSpace};\r\n  }\r\n  :host(:not(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))) .base {\r\n    padding-inline-end: ${SearchBarToken.noActionsTrailingSpace};\r\n  }\r\n  :host(:is(:state(--with-leading), :--with-leading)) ::slotted([slot=\"input\"]) {\r\n    margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace};\r\n  }\r\n  :host(:is(:is(:state(--with-trailing), :--with-trailing), :is(:state(--clearable), :--clearable)))\r\n    ::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(:is(:state(--fullscreen), :--fullscreen)) .bar {\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)[contained]:not([open])) .bar {\r\n    margin-inline-start: ${SearchViewToken.containedLeadingMargin};\r\n    margin-inline-end: ${SearchViewToken.containedTrailingMargin};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)[contained][open]) .bar,\r\n  :host(:is(:state(--fullscreen), :--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(:is(:state(--clearable), :--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(:is(:state(--fullscreen), :--fullscreen)) .header {\r\n    transition: height 150ms cubic-bezier(0.2, 0, 0, 1);\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open:not(.closing) .header {\r\n    height: ${SearchViewToken.fullScreenHeaderContainerHeight};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen):not([open])) .header,\r\n  :host(:is(:state(--fullscreen), :--fullscreen)[open]) .view.closing .header {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)[open]) .bar {\r\n    --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)) .anchor {\r\n    height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)) .view:popover-open {\r\n    border-radius: ${SearchViewToken.fullScreenContainerShape};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen)[contained]) .view:popover-open {\r\n    background-color: ${SearchViewToken.containedContainerColor};\r\n  }\r\n  :host(:is(:state(--fullscreen), :--fullscreen):not([contained])) .view:popover-open {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:is(:state(--docked), :--docked)[open]) .header,\r\n  :host(:is(:state(--docked), :--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(:is(:state(--docked), :--docked)[contained]) .results {\r\n    margin-top: ${SearchViewToken.containedDockedBarResultsGap};\r\n  }\r\n  :host(:is(:state(--docked), :--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(:is(:state(--docked), :--docked)[contained]) .results {\r\n    background-color: ${SearchViewToken.containerColor};\r\n  }\r\n  :host(:is(:state(--docked), :--docked):not([contained])) .view,\r\n  :host(:is(:state(--docked), :--docked)[contained]) .results {\r\n    border-radius: ${SearchViewToken.dockedContainerShape};\r\n  }\r\n  :host(:is(:state(--docked), :--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(:is(:state(--docked), :--docked)) .scroll-container {\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n  }\r\n  :host(:is(:state(--docked), :--docked):not([contained])) .scroll-container {\r\n    padding-bottom: ${SearchViewToken.dockedResultsBottomSpace};\r\n  }\r\n  :host(:is(:state(--docked), :--docked)[contained]) .scroll-container {\r\n    padding: ${SearchViewToken.containedDockedResultsSpace};\r\n  }\r\n  :host(:is(:state(--docked), :--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(:is(:state(--docked), :--docked):not([open])) .results {\r\n    transform: scaleY(0.8);\r\n  }\r\n  :host(:is(:state(--docked), :--docked)[open]) .results {\r\n    transform: scaleY(1);\r\n  }\r\n  @starting-style {\r\n    :host(:is(:state(--docked), :--docked)[open]) .results {\r\n      transform: scaleY(0.8);\r\n    }\r\n  }\r\n  :host(:is(:state(--docked), :--docked)) .view {\r\n    background-color: transparent;\r\n  }\r\n  :host(:is(:state(--docked), :--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(:is(:state(--docked), :--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(:is(:state(--docked), :--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(:is(:state(--docked), :--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(:is(:state(--docked), :--docked)[open]) .view::backdrop {\r\n      background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n    }\r\n  }\r\n  :host(:is(:state(--fullscreen), :--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(:is(:state(--fullscreen), :--fullscreen)) .bar,\r\n    :host(:is(:state(--fullscreen), :--fullscreen)) .header,\r\n    :host(:is(:state(--docked), :--docked)) .results,\r\n    :host(:is(:state(--docked), :--docked):not([open])) .view,\r\n    :host(:is(:state(--docked), :--docked):not([open])) .view::backdrop,\r\n    :host(:is(:state(--docked), :--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(:is(:state(--docked), :--docked):not([contained])[open]) .view,\r\n    :host(:is(:state(--docked), :--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 { AttachInternals, customElement, hasAssignedNodes, registerStyleSheet, setCustomState } 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 AttachInternals(LitElement) {\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  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 ReconnectedCallback(AttachInternals(LitElement)) {\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","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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"}