@vonage/vivid 5.24.0 → 5.27.0

package/listbox/definition.js

@@ -0,0 +1,2 @@
+import { n as registerListbox, r as Listbox, t as listboxDefinition } from "../unbundled/definition50.js";
+export { Listbox as VwcListboxElement, listboxDefinition, registerListbox };

package/listbox/index.cjs

@@ -0,0 +1,13 @@
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/slotted.cjs"),n=require("../bundled/when.cjs"),r=require("../bundled/decorate.cjs"),i=require("../bundled/aria-binding-directive.cjs"),a=require("../bundled/host-semantics.cjs"),o=require("../bundled/option.cjs"),s=require("../bundled/optgroup.cjs"),c=require("../bundled/extractOptions.cjs");function l(e,t,n,r){let i=[];for(let t of e){t._vvdSearchText=r;let e=!r||n(t,r);t._isNotMatching=!e,!t.hidden&&!t.disabled&&e&&i.push(t)}for(let e of t)if(s.n(e)){let t=Array.from(e.children).some(e=>o.n(e)&&!e._isNotMatching&&!e.hidden);e.style.display=t?``:`none`}return i}var u=t=>{class n extends t{constructor(...e){super(...e),this.searchText=``,this._filteredOptions=[]}_slottedOptionsChanged(){super._slottedOptionsChanged(),this._updateFilter()}searchTextChanged(){this._updateFilter()}optionFilterChanged(){this._updateFilter()}_updateFilter(){this._filteredOptions=l(this._slottedOptions,this._slottedElements,this.optionFilter??((e,t)=>e.text.toLowerCase().includes(t.toLowerCase())),this.searchText)}}return r.t([e.m({attribute:`search-text`,mode:`fromView`})],n.prototype,`searchText`,void 0),r.t([e.A],n.prototype,`optionFilter`,void 0),r.t([e.A],n.prototype,`_filteredOptions`,void 0),n},d=t=>{class n extends t{constructor(...e){super(...e),this._slottedElements=[],this.#e=()=>{this._slottedElementsChanged()},this._slottedOptions=[]}_slottedElementsChanged(){this._slottedOptions=c.t(this._slottedElements)}#e;connectedCallback(){super.connectedCallback(),this.addEventListener(`optgroup-change`,this.#e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`optgroup-change`,this.#e)}_slottedOptionsChanged(){for(let e of this._slottedOptions)e.id||=i.r(`option-`)}}return r.t([e.A],n.prototype,`_slottedElements`,void 0),r.t([e.A],n.prototype,`_slottedOptions`,void 0),n},f=e.p`<slot
+	${t.t({filter:(e=>o.n(e)||s.n(e)),flatten:!0,property:`_slottedElements`})}
+>
+</slot>`,p=e=>{let t=e.ctrlKey||e.metaKey;return e.shiftKey&&t?`ShiftMod`:e.shiftKey?`Shift`:t?`Mod`:null},m=(e,t,n,r)=>{if(n.amount===`step`&&r===`Mod`)return null;if(t.selectionMode===`multiple`){if(n.amount===`step`&&r===`Shift`)return{action:{type:`extend-from-anchor`,anchorIndex:e.rangeAnchorIndex??e.activeIndex},replaceExisting:!1};if(n.amount===`limit`&&r===`ShiftMod`)return{action:{type:`select-from-current`},replaceExisting:!1}}return t.selectionBehavior===`replace`?{action:{type:`select`},replaceExisting:!0}:null},h=(e,t)=>t===`Shift`?{action:{type:`select-from-most-recent`},replaceExisting:e.selectionBehavior===`replace`}:t===`Mod`?{action:{type:`toggle`},replaceExisting:!1}:e.selectionBehavior===`replace`?{action:{type:`select`},replaceExisting:!0}:{action:{type:`toggle`},replaceExisting:!1};function g(e,t,n,r){let i=new Set(e),[a,o]=[n,r].sort((e,t)=>e-t),s=[...e];for(let e=a;e<=o;e++){let n=t.selectable.optionValue(e);i.has(n)||s.push(n)}return s}function _(e,t,n,r,i){let a=new Set(e),[o,,s]=[n,r,i].sort((e,t)=>e-t),c=[...e];for(let e=o;e<=s;e++){let i=t.selectable.optionValue(e);e<n&&e<r||e>n&&e>r?a.has(i)&&(c=c.filter(e=>e!==i)):a.has(i)||c.push(i)}return c}function v(e,t){let n=e.values;for(let e=n.length-1;e>=0;e--){let r=t.selectable.optionIndex(n[e]);if(r!==null)return r}return null}function y(e,t,n){let r=t=>({...e,values:t.values??e.values,activeIndex:t.activeIndex??e.activeIndex,rangeAnchorIndex:t.rangeAnchorIndex??null});if(n.type!==`action`)return r({});let i=e.values,{targetIndex:a,selection:o}=n,s=e=>t.selectionMode===`single`&&e.length>1?[e[e.length-1]]:t.requiredSelection!==`none`&&(e.length===0||t.requiredSelection===`selectable`&&!e.some(e=>t.selectable.optionIndex(e)!==null))?i:e,c=t.selectable.optionValue(a),l=o?.replaceExisting?[]:i;switch(o?.action.type){case void 0:return r({activeIndex:a});case`select`:return r({activeIndex:a,values:s(i.includes(c)?i:[...l,c])});case`toggle`:return r({activeIndex:a,values:s(i.includes(c)?l.filter(e=>e!==c):[...l,c])});case`select-from-current`:return r({activeIndex:a,values:s(g(l,t,e.activeIndex,a))});case`select-from-most-recent`:return r({activeIndex:a,values:s(g(l,t,v(e,t)??0,a))});case`extend-from-anchor`:return r({values:s(_(l,t,o.action.anchorIndex,a,e.activeIndex)),activeIndex:a,rangeAnchorIndex:o.action.anchorIndex})}}var b=2e3;function x(e,t,n,r){let i=e.typeahead&&e.typeahead.lastInputMs>r-b?e.typeahead:null;return n.length===1&&!(n===` `&&!i)?{buffer:(i?.buffer??``)+n,lastInputMs:r}:null}function S(e,t,n){if(n.type!==`typeahead`)return{...e,typeahead:null};let r=n.typeahead;for(let i=(e.activeIndex+1)%t.selectable.numOptions;i!==e.activeIndex;i=(i+1)%t.selectable.numOptions)if(t.selectable.optionText(i).toLowerCase().startsWith(r.buffer.toLowerCase()))return{...y(e,t,{type:`action`,targetIndex:i,selection:n.selection}),typeahead:r};return{...e,typeahead:r}}var C=e=>({numOptions:e.length,optionValue:t=>e[t].value,optionText:t=>e[t].text,optionIndex:t=>{let n=e.findIndex(e=>e.value===t);return n===-1?null:n},isEq:t=>e===t});function w(e,t,n){let r=t.filter(e=>e.selected||n.includes(e.value)).map(e=>e.value),i=e.selectionMode===`single`?1:1/0;return D(e,r.slice(0,i),i)}function T(e){return`activeIndex`in e}function E(e,t,n){let r=n.filter(e=>t.all.optionIndex(e)!==null),i=t.selectionMode===`single`?1:1/0,a=r.slice(0,i);return a=D(t,a,i),{...e,values:a}}function D(e,t,n){return e.requiredSelection===`none`||e.selectable.numOptions===0?t:t.length===0?[e.selectable.optionValue(0)]:e.requiredSelection===`selectable`&&!t.some(t=>e.selectable.optionIndex(t)!==null)?n===1?[e.selectable.optionValue(0)]:[...t,e.selectable.optionValue(0)]:t}function O(e,t,n){let r=w(e,t,n);if(e.selectable.numOptions===0)return k(r);let i=0;for(let t of r){let n=e.selectable.optionIndex(t);if(n!==null){i=n;break}}return{values:r,activeIndex:i,typeahead:null,rangeAnchorIndex:null}}function k(e){return{values:e}}function A(e){switch(e){case`Home`:return{direction:`backward`,amount:`limit`};case`End`:return{direction:`forward`,amount:`limit`};case`PageUp`:return{direction:`backward`,amount:`page`};case`PageDown`:return{direction:`forward`,amount:`page`};case`ArrowUp`:return{direction:`backward`,amount:`step`};case`ArrowDown`:return{direction:`forward`,amount:`step`}}return null}function j(e,t,n,r){let i={backward:0,forward:t-1},a={backward:-1,forward:1},o={step:1,page:n};switch(r.amount){case`limit`:return i[r.direction];case`page`:case`step`:return Math.min(i.forward,Math.max(i.backward,e+a[r.direction]*o[r.amount]))}}var M=10;function N(e,t,n,r){if(!T(e))return null;let i=x(e,t,n.key,r);if(i)return{type:`typeahead`,typeahead:i,selection:t.selectionBehavior===`replace`?{action:{type:`select`},replaceExisting:!0}:null};let a=A(n.key);return a?{type:`action`,targetIndex:j(e.activeIndex,t.selectable.numOptions,M,a),selection:m(e,t,a,p(n))}:n.key===` `?{type:`action`,targetIndex:e.activeIndex,selection:h(t,p(n))}:null}function P(e,t,n,r){return{type:`action`,targetIndex:r,selection:h(t,p(n))}}function F(e,t,n){return e=S(e,t,n),e=y(e,t,n),e}var I=e=>typeof e==`object`&&!!e&&e.nodeType===1,L=(e,t)=>(!t||e!==`hidden`)&&e!==`visible`&&e!==`clip`,R=(e,t)=>{if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){let n=getComputedStyle(e,null);return L(n.overflowY,t)||L(n.overflowX,t)||(e=>{let t=(e=>{if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch{return null}})(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)})(e)}return!1},z=(e,t,n,r,i,a,o,s)=>a<e&&o>t||a>e&&o<t?0:a<=e&&s<=n||o>=t&&s>=n?a-e-r:o>t&&s<n||a<e&&s>n?o-t+i:0,B=e=>e.parentElement??(e.getRootNode().host||null),V=(e,t)=>{if(typeof document>`u`)return[];let{scrollMode:n,block:r,inline:i,boundary:a,skipOverflowHiddenElements:o}=t,s=typeof a==`function`?a:e=>e!==a;if(!I(e))throw TypeError(`Invalid target`);let c=document.scrollingElement||document.documentElement,l=[],u=e;for(;I(u)&&s(u);){if(u=B(u),u===c){l.push(u);break}u!=null&&u===document.body&&R(u)&&!R(document.documentElement)||u!=null&&R(u,o)&&l.push(u)}let d=window.visualViewport?.width??innerWidth,f=window.visualViewport?.height??innerHeight,{scrollX:p,scrollY:m}=window,{height:h,width:g,top:_,right:v,bottom:y,left:b}=e.getBoundingClientRect(),{top:x,right:S,bottom:C,left:w}=(e=>{let t=window.getComputedStyle(e);return{top:parseFloat(t.scrollMarginTop)||0,right:parseFloat(t.scrollMarginRight)||0,bottom:parseFloat(t.scrollMarginBottom)||0,left:parseFloat(t.scrollMarginLeft)||0}})(e),T=r===`start`||r===`nearest`?_-x:r===`end`?y+C:_+h/2-x+C,E=i===`center`?b+g/2-w+S:i===`end`?v+S:b-w,D=[];for(let e=0;e<l.length;e++){let t=l[e],{height:a,width:o,top:s,right:u,bottom:x,left:S}=t.getBoundingClientRect();if(n===`if-needed`&&_>=0&&b>=0&&y<=f&&v<=d&&(t===c&&!R(t)||_>=s&&y<=x&&b>=S&&v<=u))return D;let C=getComputedStyle(t),w=parseInt(C.borderLeftWidth,10),O=parseInt(C.borderTopWidth,10),k=parseInt(C.borderRightWidth,10),A=parseInt(C.borderBottomWidth,10),j=0,M=0,N=`offsetWidth`in t?t.offsetWidth-t.clientWidth-w-k:0,P=`offsetHeight`in t?t.offsetHeight-t.clientHeight-O-A:0,F=`offsetWidth`in t?t.offsetWidth===0?0:o/t.offsetWidth:0,I=`offsetHeight`in t?t.offsetHeight===0?0:a/t.offsetHeight:0;if(c===t)j=r===`start`?T:r===`end`?T-f:r===`nearest`?z(m,m+f,f,O,A,m+T,m+T+h,h):T-f/2,M=i===`start`?E:i===`center`?E-d/2:i===`end`?E-d:z(p,p+d,d,w,k,p+E,p+E+g,g),j=Math.max(0,j+m),M=Math.max(0,M+p);else{j=r===`start`?T-s-O:r===`end`?T-x+A+P:r===`nearest`?z(s,x,a,O,A+P,T,T+h,h):T-(s+a/2)+P/2,M=i===`start`?E-S-w:i===`center`?E-(S+o/2)+N/2:i===`end`?E-u+k+N:z(S,u,o,w,k+N,E,E+g,g);let{scrollLeft:e,scrollTop:n}=t;j=I===0?0:Math.max(0,Math.min(n+j/I,t.scrollHeight-a/I+P)),M=F===0?0:Math.max(0,Math.min(e+M/F,t.scrollWidth-o/F+N)),T+=n-j,E+=e-M}D.push({el:t,top:j,left:M})}return D},H=e=>!1===e?{block:`end`,inline:`nearest`}:(e=>e===Object(e)&&Object.keys(e).length!==0)(e)?e:{block:`start`,inline:`nearest`};function U(e,t){if(!e.isConnected||!(e=>{let t=e;for(;t&&t.parentNode;){if(t.parentNode===document)return!0;t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentNode}return!1})(e))return;let n=(e=>{let t=window.getComputedStyle(e);return{top:parseFloat(t.scrollMarginTop)||0,right:parseFloat(t.scrollMarginRight)||0,bottom:parseFloat(t.scrollMarginBottom)||0,left:parseFloat(t.scrollMarginLeft)||0}})(e);if((e=>typeof e==`object`&&typeof e.behavior==`function`)(t))return t.behavior(V(e,t));let r=typeof t==`boolean`||t==null?void 0:t.behavior;for(let{el:i,top:a,left:o}of V(e,H(t))){let e=a-n.top+n.bottom,t=o-n.left+n.right;i.scroll({top:e,left:t,behavior:r})}}var W=(e,t)=>JSON.stringify(e)===JSON.stringify(t),G=class extends u(d(a.t(e.t))){constructor(...e){super(...e),this.selectionMode=`single`,this.selectionBehavior=`toggle`,this.requiredSelection=`none`,this._hasNoMatches=!1,this._showNoMatchesMessage=!1,this._activeDescendantId=null,this.values=[],this._state=k([]),this._ctx={selectionMode:`single`,selectionBehavior:`toggle`,requiredSelection:`none`,selectable:C([]),all:C([])},this._externalChangeQueued=!1}selectionModeChanged(){this._registerExternalChange()}selectionBehaviorChanged(){this._registerExternalChange()}requiredSelectionChanged(){this._registerExternalChange()}_filteredOptionsChanged(){this._registerExternalChange(),this._updateNoMatchesMessage()}_updateNoMatchesMessage(){this._hasNoMatches=this.searchText!==``&&!this._slottedOptions.some(e=>!e.hidden&&!e._isNotMatching),clearTimeout(this._noMatchesTimer),this._hasNoMatches?this._showNoMatchesMessage||(this._noMatchesTimer=setTimeout(()=>{this._showNoMatchesMessage=!0},10)):this._showNoMatchesMessage=!1}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._noMatchesTimer)}valuesChanged(){this._state&&!W(this._state.values,this.values)&&this._registerExternalChange()}get value(){return this.values[0]??null}set value(e){this.values=e===null?[]:[e]}_registerExternalChange(){this._externalChangeQueued||(this._externalChangeQueued=!0,queueMicrotask(()=>this._applyPendingExternalChanges()))}_applyPendingExternalChanges(){if(this._externalChangeQueued=!1,!this._ctx.all.isEq(this._slottedOptions)||!this._ctx.selectable.isEq(this._filteredOptions)){this._initializeState();return}let e={...this._ctx,selectionMode:this.selectionMode,selectionBehavior:this.selectionBehavior,requiredSelection:this.requiredSelection};this._ctx=e,this._applyNewState(E(this._state,e,this.values))}_initializeState(){if(this._ctx={selectionMode:this.selectionMode,selectionBehavior:this.selectionBehavior,requiredSelection:this.requiredSelection,selectable:C(this._filteredOptions),all:C(this._slottedOptions)},!this._slottedOptions?.length){this._state=k([]),this._activeDescendantId=null;return}this._applyNewState(O(this._ctx,this._slottedOptions,this.values))}_applyNewState(e){if(T(e)){let t=this._filteredOptions[e.activeIndex];this._activeDescendantId=t.id,U(t,{block:`nearest`,scrollMode:`if-needed`})}else this._activeDescendantId=null;let t=!W(this.values,e.values);this._state=e,this.values=[...e.values],this._updateSlottedOptions(),t&&this.$emit(`change`,void 0,{bubbles:!1,composed:!1})}_updateSlottedOptions(){for(let e of this._slottedOptions)e.selected=this.values.includes(e.value),e._highlighted=!!(this._activeDescendantId&&e.id===this._activeDescendantId)}_onKeydown(e){let t=N(this._state,this._ctx,e,Date.now());return!t||(this._applyNewState(F(this._state,this._ctx,t)),!1)}_onClick(e){let t=e.target.closest(`[data-vvd-component=option]`),n=t?this._filteredOptions.indexOf(t):-1;if(n===-1)return!0;let r=this._state;return this._applyNewState(F(r,this._ctx,P(r,this._ctx,e,n))),!1}};r.t([e.m({attribute:`selection-mode`,mode:`fromView`})],G.prototype,`selectionMode`,void 0),r.t([e.m({attribute:`selection-behavior`,mode:`fromView`})],G.prototype,`selectionBehavior`,void 0),r.t([e.m({attribute:`required-selection`,mode:`fromView`})],G.prototype,`requiredSelection`,void 0),r.t([e.A],G.prototype,`_hasNoMatches`,void 0),r.t([e.A],G.prototype,`_showNoMatchesMessage`,void 0),r.t([e.A],G.prototype,`_activeDescendantId`,void 0),r.t([e.A],G.prototype,`values`,void 0);var K=`:host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}`,q=e=>e._hasNoMatches,J=e.u(`listbox`,G,t=>e.p`<template
+		tabindex="0"
+		${a.n({role:e=>q(e)?void 0:`listbox`,ariaMultiSelectable:e=>!q(e)&&e.selectionMode===`multiple`?`true`:void 0})}
+		aria-activedescendant="${e=>e._activeDescendantId}"
+		@click="${(e,t)=>e._onClick(t.event)}"
+		@keydown="${(e,t)=>e._onKeydown(t.event)}"
+		>${f}${n.t(q,e.p`<div role="status" aria-live="polite" class="no-matches">
+				${n.t(e=>e._showNoMatchesMessage,e.p`<slot name="no-matches"></slot>`)}
+			</div>`)}</template
+	>`,[],{styles:K});e.d(J)();

package/listbox/index.js

@@ -0,0 +1,554 @@
+import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/slotted.js";
+import { t as s } from "../bundled/when.js";
+import { t as c } from "../bundled/decorate.js";
+import { r as l } from "../bundled/aria-binding-directive.js";
+import { n as u, t as d } from "../bundled/host-semantics.js";
+import { n as f } from "../bundled/option.js";
+import { n as p } from "../bundled/optgroup.js";
+import { t as m } from "../bundled/extractOptions.js";
+//#region src/shared/listbox/with-options-filter.ts
+function h(e, t, n, r) {
+	let i = [];
+	for (let t of e) {
+		t._vvdSearchText = r;
+		let e = !r || n(t, r);
+		t._isNotMatching = !e, !t.hidden && !t.disabled && e && i.push(t);
+	}
+	for (let e of t) if (p(e)) {
+		let t = Array.from(e.children).some((e) => f(e) && !e._isNotMatching && !e.hidden);
+		e.style.display = t ? "" : "none";
+	}
+	return i;
+}
+var g = (t) => {
+	class r extends t {
+		constructor(...e) {
+			super(...e), this.searchText = "", this._filteredOptions = [];
+		}
+		_slottedOptionsChanged() {
+			super._slottedOptionsChanged(), this._updateFilter();
+		}
+		searchTextChanged() {
+			this._updateFilter();
+		}
+		optionFilterChanged() {
+			this._updateFilter();
+		}
+		_updateFilter() {
+			this._filteredOptions = h(this._slottedOptions, this._slottedElements, this.optionFilter ?? ((e, t) => e.text.toLowerCase().includes(t.toLowerCase())), this.searchText);
+		}
+	}
+	return c([n({
+		attribute: "search-text",
+		mode: "fromView"
+	})], r.prototype, "searchText", void 0), c([e], r.prototype, "optionFilter", void 0), c([e], r.prototype, "_filteredOptions", void 0), r;
+}, _ = (t) => {
+	class n extends t {
+		constructor(...e) {
+			super(...e), this._slottedElements = [], this.#e = () => {
+				this._slottedElementsChanged();
+			}, this._slottedOptions = [];
+		}
+		_slottedElementsChanged() {
+			this._slottedOptions = m(this._slottedElements);
+		}
+		#e;
+		connectedCallback() {
+			super.connectedCallback(), this.addEventListener("optgroup-change", this.#e);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.removeEventListener("optgroup-change", this.#e);
+		}
+		_slottedOptionsChanged() {
+			for (let e of this._slottedOptions) e.id ||= l("option-");
+		}
+	}
+	return c([e], n.prototype, "_slottedElements", void 0), c([e], n.prototype, "_slottedOptions", void 0), n;
+}, v = r`<slot
+	${o({
+	filter: ((e) => f(e) || p(e)),
+	flatten: !0,
+	property: "_slottedElements"
+})}
+>
+</slot>`, y = (e) => {
+	let t = e.ctrlKey || e.metaKey;
+	return e.shiftKey && t ? "ShiftMod" : e.shiftKey ? "Shift" : t ? "Mod" : null;
+}, b = (e, t, n, r) => {
+	if (n.amount === "step" && r === "Mod") return null;
+	if (t.selectionMode === "multiple") {
+		if (n.amount === "step" && r === "Shift") return {
+			action: {
+				type: "extend-from-anchor",
+				anchorIndex: e.rangeAnchorIndex ?? e.activeIndex
+			},
+			replaceExisting: !1
+		};
+		if (n.amount === "limit" && r === "ShiftMod") return {
+			action: { type: "select-from-current" },
+			replaceExisting: !1
+		};
+	}
+	return t.selectionBehavior === "replace" ? {
+		action: { type: "select" },
+		replaceExisting: !0
+	} : null;
+}, x = (e, t) => t === "Shift" ? {
+	action: { type: "select-from-most-recent" },
+	replaceExisting: e.selectionBehavior === "replace"
+} : t === "Mod" ? {
+	action: { type: "toggle" },
+	replaceExisting: !1
+} : e.selectionBehavior === "replace" ? {
+	action: { type: "select" },
+	replaceExisting: !0
+} : {
+	action: { type: "toggle" },
+	replaceExisting: !1
+};
+function S(e, t, n, r) {
+	let i = new Set(e), [a, o] = [n, r].sort((e, t) => e - t), s = [...e];
+	for (let e = a; e <= o; e++) {
+		let n = t.selectable.optionValue(e);
+		i.has(n) || s.push(n);
+	}
+	return s;
+}
+function C(e, t, n, r, i) {
+	let a = new Set(e), [o, , s] = [
+		n,
+		r,
+		i
+	].sort((e, t) => e - t), c = [...e];
+	for (let e = o; e <= s; e++) {
+		let i = t.selectable.optionValue(e);
+		e < n && e < r || e > n && e > r ? a.has(i) && (c = c.filter((e) => e !== i)) : a.has(i) || c.push(i);
+	}
+	return c;
+}
+function w(e, t) {
+	let n = e.values;
+	for (let e = n.length - 1; e >= 0; e--) {
+		let r = t.selectable.optionIndex(n[e]);
+		if (r !== null) return r;
+	}
+	return null;
+}
+function T(e, t, n) {
+	let r = (t) => ({
+		...e,
+		values: t.values ?? e.values,
+		activeIndex: t.activeIndex ?? e.activeIndex,
+		rangeAnchorIndex: t.rangeAnchorIndex ?? null
+	});
+	if (n.type !== "action") return r({});
+	let i = e.values, { targetIndex: a, selection: o } = n, s = (e) => t.selectionMode === "single" && e.length > 1 ? [e[e.length - 1]] : t.requiredSelection !== "none" && (e.length === 0 || t.requiredSelection === "selectable" && !e.some((e) => t.selectable.optionIndex(e) !== null)) ? i : e, c = t.selectable.optionValue(a), l = o?.replaceExisting ? [] : i;
+	switch (o?.action.type) {
+		case void 0: return r({ activeIndex: a });
+		case "select": return r({
+			activeIndex: a,
+			values: s(i.includes(c) ? i : [...l, c])
+		});
+		case "toggle": return r({
+			activeIndex: a,
+			values: s(i.includes(c) ? l.filter((e) => e !== c) : [...l, c])
+		});
+		case "select-from-current": return r({
+			activeIndex: a,
+			values: s(S(l, t, e.activeIndex, a))
+		});
+		case "select-from-most-recent": return r({
+			activeIndex: a,
+			values: s(S(l, t, w(e, t) ?? 0, a))
+		});
+		case "extend-from-anchor": return r({
+			values: s(C(l, t, o.action.anchorIndex, a, e.activeIndex)),
+			activeIndex: a,
+			rangeAnchorIndex: o.action.anchorIndex
+		});
+	}
+}
+//#endregion
+//#region src/shared/listbox/typeahead.ts
+var E = 2e3;
+function D(e, t, n, r) {
+	let i = e.typeahead && e.typeahead.lastInputMs > r - E ? e.typeahead : null;
+	return n.length === 1 && !(n === " " && !i) ? {
+		buffer: (i?.buffer ?? "") + n,
+		lastInputMs: r
+	} : null;
+}
+function O(e, t, n) {
+	if (n.type !== "typeahead") return {
+		...e,
+		typeahead: null
+	};
+	let r = n.typeahead;
+	for (let i = (e.activeIndex + 1) % t.selectable.numOptions; i !== e.activeIndex; i = (i + 1) % t.selectable.numOptions) if (t.selectable.optionText(i).toLowerCase().startsWith(r.buffer.toLowerCase())) return {
+		...T(e, t, {
+			type: "action",
+			targetIndex: i,
+			selection: n.selection
+		}),
+		typeahead: r
+	};
+	return {
+		...e,
+		typeahead: r
+	};
+}
+//#endregion
+//#region src/shared/listbox/options.ts
+var k = (e) => ({
+	numOptions: e.length,
+	optionValue: (t) => e[t].value,
+	optionText: (t) => e[t].text,
+	optionIndex: (t) => {
+		let n = e.findIndex((e) => e.value === t);
+		return n === -1 ? null : n;
+	},
+	isEq: (t) => e === t
+});
+function A(e, t, n) {
+	let r = t.filter((e) => e.selected || n.includes(e.value)).map((e) => e.value), i = e.selectionMode === "single" ? 1 : Infinity;
+	return N(e, r.slice(0, i), i);
+}
+//#endregion
+//#region src/shared/listbox/state.ts
+function j(e) {
+	return "activeIndex" in e;
+}
+function M(e, t, n) {
+	let r = n.filter((e) => t.all.optionIndex(e) !== null), i = t.selectionMode === "single" ? 1 : Infinity, a = r.slice(0, i);
+	return a = N(t, a, i), {
+		...e,
+		values: a
+	};
+}
+function N(e, t, n) {
+	return e.requiredSelection === "none" || e.selectable.numOptions === 0 ? t : t.length === 0 ? [e.selectable.optionValue(0)] : e.requiredSelection === "selectable" && !t.some((t) => e.selectable.optionIndex(t) !== null) ? n === 1 ? [e.selectable.optionValue(0)] : [...t, e.selectable.optionValue(0)] : t;
+}
+function P(e, t, n) {
+	let r = A(e, t, n);
+	if (e.selectable.numOptions === 0) return F(r);
+	let i = 0;
+	for (let t of r) {
+		let n = e.selectable.optionIndex(t);
+		if (n !== null) {
+			i = n;
+			break;
+		}
+	}
+	return {
+		values: r,
+		activeIndex: i,
+		typeahead: null,
+		rangeAnchorIndex: null
+	};
+}
+function F(e) {
+	return { values: e };
+}
+//#endregion
+//#region src/shared/listbox/move.ts
+function I(e) {
+	switch (e) {
+		case "Home": return {
+			direction: "backward",
+			amount: "limit"
+		};
+		case "End": return {
+			direction: "forward",
+			amount: "limit"
+		};
+		case "PageUp": return {
+			direction: "backward",
+			amount: "page"
+		};
+		case "PageDown": return {
+			direction: "forward",
+			amount: "page"
+		};
+		case "ArrowUp": return {
+			direction: "backward",
+			amount: "step"
+		};
+		case "ArrowDown": return {
+			direction: "forward",
+			amount: "step"
+		};
+	}
+	return null;
+}
+function L(e, t, n, r) {
+	let i = {
+		backward: 0,
+		forward: t - 1
+	}, a = {
+		backward: -1,
+		forward: 1
+	}, o = {
+		step: 1,
+		page: n
+	};
+	switch (r.amount) {
+		case "limit": return i[r.direction];
+		case "page":
+		case "step": return Math.min(i.forward, Math.max(i.backward, e + a[r.direction] * o[r.amount]));
+	}
+}
+//#endregion
+//#region src/shared/listbox/commands.ts
+var R = 10;
+function z(e, t, n, r) {
+	if (!j(e)) return null;
+	let i = D(e, t, n.key, r);
+	if (i) return {
+		type: "typeahead",
+		typeahead: i,
+		selection: t.selectionBehavior === "replace" ? {
+			action: { type: "select" },
+			replaceExisting: !0
+		} : null
+	};
+	let a = I(n.key);
+	return a ? {
+		type: "action",
+		targetIndex: L(e.activeIndex, t.selectable.numOptions, R, a),
+		selection: b(e, t, a, y(n))
+	} : n.key === " " ? {
+		type: "action",
+		targetIndex: e.activeIndex,
+		selection: x(t, y(n))
+	} : null;
+}
+function B(e, t, n, r) {
+	return {
+		type: "action",
+		targetIndex: r,
+		selection: x(t, y(n))
+	};
+}
+function V(e, t, n) {
+	return e = O(e, t, n), e = T(e, t, n), e;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/compute-scroll-into-view@3.1.1/node_modules/compute-scroll-into-view/dist/index.js
+var H = (e) => typeof e == "object" && !!e && e.nodeType === 1, U = (e, t) => (!t || e !== "hidden") && e !== "visible" && e !== "clip", W = (e, t) => {
+	if (e.clientHeight < e.scrollHeight || e.clientWidth < e.scrollWidth) {
+		let n = getComputedStyle(e, null);
+		return U(n.overflowY, t) || U(n.overflowX, t) || ((e) => {
+			let t = ((e) => {
+				if (!e.ownerDocument || !e.ownerDocument.defaultView) return null;
+				try {
+					return e.ownerDocument.defaultView.frameElement;
+				} catch {
+					return null;
+				}
+			})(e);
+			return !!t && (t.clientHeight < e.scrollHeight || t.clientWidth < e.scrollWidth);
+		})(e);
+	}
+	return !1;
+}, G = (e, t, n, r, i, a, o, s) => a < e && o > t || a > e && o < t ? 0 : a <= e && s <= n || o >= t && s >= n ? a - e - r : o > t && s < n || a < e && s > n ? o - t + i : 0, K = (e) => e.parentElement ?? (e.getRootNode().host || null), q = (e, t) => {
+	if (typeof document > "u") return [];
+	let { scrollMode: n, block: r, inline: i, boundary: a, skipOverflowHiddenElements: o } = t, s = typeof a == "function" ? a : (e) => e !== a;
+	if (!H(e)) throw TypeError("Invalid target");
+	let c = document.scrollingElement || document.documentElement, l = [], u = e;
+	for (; H(u) && s(u);) {
+		if (u = K(u), u === c) {
+			l.push(u);
+			break;
+		}
+		u != null && u === document.body && W(u) && !W(document.documentElement) || u != null && W(u, o) && l.push(u);
+	}
+	let d = window.visualViewport?.width ?? innerWidth, f = window.visualViewport?.height ?? innerHeight, { scrollX: p, scrollY: m } = window, { height: h, width: g, top: _, right: v, bottom: y, left: b } = e.getBoundingClientRect(), { top: x, right: S, bottom: C, left: w } = ((e) => {
+		let t = window.getComputedStyle(e);
+		return {
+			top: parseFloat(t.scrollMarginTop) || 0,
+			right: parseFloat(t.scrollMarginRight) || 0,
+			bottom: parseFloat(t.scrollMarginBottom) || 0,
+			left: parseFloat(t.scrollMarginLeft) || 0
+		};
+	})(e), T = r === "start" || r === "nearest" ? _ - x : r === "end" ? y + C : _ + h / 2 - x + C, E = i === "center" ? b + g / 2 - w + S : i === "end" ? v + S : b - w, D = [];
+	for (let e = 0; e < l.length; e++) {
+		let t = l[e], { height: a, width: o, top: s, right: u, bottom: x, left: S } = t.getBoundingClientRect();
+		if (n === "if-needed" && _ >= 0 && b >= 0 && y <= f && v <= d && (t === c && !W(t) || _ >= s && y <= x && b >= S && v <= u)) return D;
+		let C = getComputedStyle(t), w = parseInt(C.borderLeftWidth, 10), O = parseInt(C.borderTopWidth, 10), k = parseInt(C.borderRightWidth, 10), A = parseInt(C.borderBottomWidth, 10), j = 0, M = 0, N = "offsetWidth" in t ? t.offsetWidth - t.clientWidth - w - k : 0, P = "offsetHeight" in t ? t.offsetHeight - t.clientHeight - O - A : 0, F = "offsetWidth" in t ? t.offsetWidth === 0 ? 0 : o / t.offsetWidth : 0, I = "offsetHeight" in t ? t.offsetHeight === 0 ? 0 : a / t.offsetHeight : 0;
+		if (c === t) j = r === "start" ? T : r === "end" ? T - f : r === "nearest" ? G(m, m + f, f, O, A, m + T, m + T + h, h) : T - f / 2, M = i === "start" ? E : i === "center" ? E - d / 2 : i === "end" ? E - d : G(p, p + d, d, w, k, p + E, p + E + g, g), j = Math.max(0, j + m), M = Math.max(0, M + p);
+		else {
+			j = r === "start" ? T - s - O : r === "end" ? T - x + A + P : r === "nearest" ? G(s, x, a, O, A + P, T, T + h, h) : T - (s + a / 2) + P / 2, M = i === "start" ? E - S - w : i === "center" ? E - (S + o / 2) + N / 2 : i === "end" ? E - u + k + N : G(S, u, o, w, k + N, E, E + g, g);
+			let { scrollLeft: e, scrollTop: n } = t;
+			j = I === 0 ? 0 : Math.max(0, Math.min(n + j / I, t.scrollHeight - a / I + P)), M = F === 0 ? 0 : Math.max(0, Math.min(e + M / F, t.scrollWidth - o / F + N)), T += n - j, E += e - M;
+		}
+		D.push({
+			el: t,
+			top: j,
+			left: M
+		});
+	}
+	return D;
+}, J = (e) => !1 === e ? {
+	block: "end",
+	inline: "nearest"
+} : ((e) => e === Object(e) && Object.keys(e).length !== 0)(e) ? e : {
+	block: "start",
+	inline: "nearest"
+};
+function Y(e, t) {
+	if (!e.isConnected || !((e) => {
+		let t = e;
+		for (; t && t.parentNode;) {
+			if (t.parentNode === document) return !0;
+			t = t.parentNode instanceof ShadowRoot ? t.parentNode.host : t.parentNode;
+		}
+		return !1;
+	})(e)) return;
+	let n = ((e) => {
+		let t = window.getComputedStyle(e);
+		return {
+			top: parseFloat(t.scrollMarginTop) || 0,
+			right: parseFloat(t.scrollMarginRight) || 0,
+			bottom: parseFloat(t.scrollMarginBottom) || 0,
+			left: parseFloat(t.scrollMarginLeft) || 0
+		};
+	})(e);
+	if (((e) => typeof e == "object" && typeof e.behavior == "function")(t)) return t.behavior(q(e, t));
+	let r = typeof t == "boolean" || t == null ? void 0 : t.behavior;
+	for (let { el: i, top: a, left: o } of q(e, J(t))) {
+		let e = a - n.top + n.bottom, t = o - n.left + n.right;
+		i.scroll({
+			top: e,
+			left: t,
+			behavior: r
+		});
+	}
+}
+//#endregion
+//#region src/lib/listbox/listbox.ts
+var X = (e, t) => JSON.stringify(e) === JSON.stringify(t), Z = class extends g(_(d(i))) {
+	constructor(...e) {
+		super(...e), this.selectionMode = "single", this.selectionBehavior = "toggle", this.requiredSelection = "none", this._hasNoMatches = !1, this._showNoMatchesMessage = !1, this._activeDescendantId = null, this.values = [], this._state = F([]), this._ctx = {
+			selectionMode: "single",
+			selectionBehavior: "toggle",
+			requiredSelection: "none",
+			selectable: k([]),
+			all: k([])
+		}, this._externalChangeQueued = !1;
+	}
+	selectionModeChanged() {
+		this._registerExternalChange();
+	}
+	selectionBehaviorChanged() {
+		this._registerExternalChange();
+	}
+	requiredSelectionChanged() {
+		this._registerExternalChange();
+	}
+	_filteredOptionsChanged() {
+		this._registerExternalChange(), this._updateNoMatchesMessage();
+	}
+	_updateNoMatchesMessage() {
+		this._hasNoMatches = this.searchText !== "" && !this._slottedOptions.some((e) => !e.hidden && !e._isNotMatching), clearTimeout(this._noMatchesTimer), this._hasNoMatches ? this._showNoMatchesMessage || (this._noMatchesTimer = setTimeout(() => {
+			this._showNoMatchesMessage = !0;
+		}, 10)) : this._showNoMatchesMessage = !1;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), clearTimeout(this._noMatchesTimer);
+	}
+	valuesChanged() {
+		this._state && !X(this._state.values, this.values) && this._registerExternalChange();
+	}
+	get value() {
+		return this.values[0] ?? null;
+	}
+	set value(e) {
+		this.values = e === null ? [] : [e];
+	}
+	_registerExternalChange() {
+		this._externalChangeQueued || (this._externalChangeQueued = !0, queueMicrotask(() => this._applyPendingExternalChanges()));
+	}
+	_applyPendingExternalChanges() {
+		if (this._externalChangeQueued = !1, !this._ctx.all.isEq(this._slottedOptions) || !this._ctx.selectable.isEq(this._filteredOptions)) {
+			this._initializeState();
+			return;
+		}
+		let e = {
+			...this._ctx,
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection
+		};
+		this._ctx = e, this._applyNewState(M(this._state, e, this.values));
+	}
+	_initializeState() {
+		if (this._ctx = {
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection,
+			selectable: k(this._filteredOptions),
+			all: k(this._slottedOptions)
+		}, !this._slottedOptions?.length) {
+			this._state = F([]), this._activeDescendantId = null;
+			return;
+		}
+		this._applyNewState(P(this._ctx, this._slottedOptions, this.values));
+	}
+	_applyNewState(e) {
+		if (j(e)) {
+			let t = this._filteredOptions[e.activeIndex];
+			this._activeDescendantId = t.id, Y(t, {
+				block: "nearest",
+				scrollMode: "if-needed"
+			});
+		} else this._activeDescendantId = null;
+		let t = !X(this.values, e.values);
+		this._state = e, this.values = [...e.values], this._updateSlottedOptions(), t && this.$emit("change", void 0, {
+			bubbles: !1,
+			composed: !1
+		});
+	}
+	_updateSlottedOptions() {
+		for (let e of this._slottedOptions) e.selected = this.values.includes(e.value), e._highlighted = !!(this._activeDescendantId && e.id === this._activeDescendantId);
+	}
+	_onKeydown(e) {
+		let t = z(this._state, this._ctx, e, Date.now());
+		return !t || (this._applyNewState(V(this._state, this._ctx, t)), !1);
+	}
+	_onClick(e) {
+		let t = e.target.closest("[data-vvd-component=option]"), n = t ? this._filteredOptions.indexOf(t) : -1;
+		if (n === -1) return !0;
+		let r = this._state;
+		return this._applyNewState(V(r, this._ctx, B(r, this._ctx, e, n))), !1;
+	}
+};
+c([n({
+	attribute: "selection-mode",
+	mode: "fromView"
+})], Z.prototype, "selectionMode", void 0), c([n({
+	attribute: "selection-behavior",
+	mode: "fromView"
+})], Z.prototype, "selectionBehavior", void 0), c([n({
+	attribute: "required-selection",
+	mode: "fromView"
+})], Z.prototype, "requiredSelection", void 0), c([e], Z.prototype, "_hasNoMatches", void 0), c([e], Z.prototype, "_showNoMatchesMessage", void 0), c([e], Z.prototype, "_activeDescendantId", void 0), c([e], Z.prototype, "values", void 0);
+//#endregion
+//#region src/lib/listbox/listbox.scss?inline
+var Q = ":host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}.no-matches{padding:8px 16px}", $ = (e) => e._hasNoMatches, ee = a("listbox", Z, (e) => r`<template
+		tabindex="0"
+		${u({
+	role: (e) => $(e) ? void 0 : "listbox",
+	ariaMultiSelectable: (e) => !$(e) && e.selectionMode === "multiple" ? "true" : void 0
+})}
+		aria-activedescendant="${(e) => e._activeDescendantId}"
+		@click="${(e, t) => e._onClick(t.event)}"
+		@keydown="${(e, t) => e._onKeydown(t.event)}"
+		>${v}${s($, r`<div role="status" aria-live="polite" class="no-matches">
+				${s((e) => e._showNoMatchesMessage, r`<slot name="no-matches"></slot>`)}
+			</div>`)}</template
+	>`, [], { styles: Q });
+//#endregion
+//#region src/lib/listbox/index.ts
+t(ee)();
+//#endregion