@vonage/vivid 5.23.1 → 5.25.0

package/bundled/definition9.js

@@ -1,82 +1,105 @@
-import { P as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.js";
-import { r as o, t as s } from "./slotted.js";
-import { t as c } from "./decorate.js";
-import { t as l } from "./class-names.js";
-import { i as u, t as d } from "./definition8.js";
-import { n as f, t as p } from "./anchored.js";
-import { t as m } from "./kbd-shortcut.js";
-import { n as h, t as g } from "./render-in-light-dom.js";
-import { t as _ } from "./dialog.js";
+import { A as e, P as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
+import { r as s, t as c } from "./slotted.js";
+import { t as l } from "./when.js";
+import { t as u } from "./decorate.js";
+import { t as d } from "./class-names.js";
+import { i as f, t as p } from "./definition8.js";
+import { n as m, t as h } from "./anchored.js";
+import { t as g } from "./kbd-shortcut.js";
+import { n as _, t as v } from "./render-in-light-dom.js";
+import { t as y } from "./dialog.js";
 //#region src/lib/tooltip/tooltip.scss?inline
-var v = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}", y = class extends m(p(i)) {
+var b = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}", x = class extends g(h(a)) {
 	constructor(...e) {
-		super(...e), this.open = !1, this._descriptionId = `vwc-tooltip-desc-${h()}`, this.#n = () => {
+		super(...e), this.open = !1, this._descriptionId = `vwc-tooltip-desc-${_()}`, this._descriptionSecondaryId = `vwc-tooltip-desc-secondary-${_()}`, this._defaultSlotContent = [], this.#i = () => {
 			this.open = !0;
-		}, this.#r = () => {
+		}, this.#a = () => {
 			this.open = !1;
-		}, this.#a = (e) => {
+		}, this.#s = (e) => {
 			/* v8 ignore else -- @preserve */
-			e.key === "Escape" && this.#r();
+			e.key === "Escape" && this.#a();
 		};
 	}
+	_defaultSlotContentChanged() {
+		for (let e of this._defaultSlotContent) e.id ||= `vwc-tooltip-content-${_()}`;
+		this._anchorEl && this.#t(this._anchorEl);
+	}
 	_kbdAriaShortcutsValueChanged() {
-		this._anchorEl && e.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+		this._anchorEl && t.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#i();
+		super.connectedCallback(), this.#o();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#i();
+		super.disconnectedCallback(), this.#o();
 	}
 	_anchorElChanged(e, t) {
-		e && this.#t(e), t && this.#e(t);
+		e && this.#r(e), t && this.#n(t);
+	}
+	#e() {
+		return [
+			this._descriptionId,
+			this._descriptionSecondaryId,
+			...this._defaultSlotContent.map((e) => e.id).filter(Boolean)
+		];
 	}
-	#e(t) {
-		t.addEventListener("mouseover", this.#n), t.addEventListener("mouseout", this.#r), t.addEventListener("focusin", this.#n), t.addEventListener("focusout", this.#r);
-		let n = t.getAttribute("aria-describedby") ?? t.ariaDescribedBy;
-		t.setAttribute("aria-describedby", n ? `${n} ${this._descriptionId}` : this._descriptionId), e.setAttribute(t, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+	#t(e) {
+		let t = e.getAttribute("aria-describedby") ?? e.ariaDescribedBy ?? "", n = new Set(this.#e()), r = t.split(" ").filter((e) => e && !n.has(e));
+		e.setAttribute("aria-describedby", [...r, ...this.#e()].join(" "));
 	}
-	#t(t) {
-		t.removeEventListener("mouseover", this.#n), t.removeEventListener("mouseout", this.#r), t.removeEventListener("focusin", this.#n), t.removeEventListener("focusout", this.#r);
-		let n = (t.getAttribute("aria-describedby") ?? t.ariaDescribedBy ?? "").split(" ").filter((e) => e !== this._descriptionId), r = n.length ? n.join(" ") : null;
-		t.hasAttribute("aria-describedby") ? e.setAttribute(t, "aria-describedby", r) : t.ariaDescribedBy = r, t.removeAttribute("aria-keyshortcuts");
+	#n(e) {
+		e.addEventListener("mouseover", this.#i), e.addEventListener("mouseout", this.#a), e.addEventListener("focusin", this.#i), e.addEventListener("focusout", this.#a), this.#t(e), t.setAttribute(e, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
-	#n;
-	#r;
-	#i() {
-		document.removeEventListener("keydown", this.#a), this.open && this.isConnected && document.addEventListener("keydown", this.#a);
+	#r(e) {
+		e.removeEventListener("mouseover", this.#i), e.removeEventListener("mouseout", this.#a), e.removeEventListener("focusin", this.#i), e.removeEventListener("focusout", this.#a);
+		let n = e.getAttribute("aria-describedby") ?? e.ariaDescribedBy ?? "", r = new Set(this.#e()), i = n.split(" ").filter((e) => e && !r.has(e)), a = i.length ? i.join(" ") : null;
+		e.hasAttribute("aria-describedby") ? t.setAttribute(e, "aria-describedby", a) : e.ariaDescribedBy = a, e.removeAttribute("aria-keyshortcuts");
 	}
+	#i;
 	#a;
+	#o() {
+		document.removeEventListener("keydown", this.#s), this.open && this.isConnected && document.addEventListener("keydown", this.#s);
+	}
+	#s;
 	openChanged(e) {
-		e !== void 0 && this.#i();
+		e !== void 0 && this.#o();
 	}
 };
-c([n], y.prototype, "text", void 0), c([n({ mode: "fromView" })], y.prototype, "placement", void 0), c([n({ mode: "boolean" })], y.prototype, "open", void 0);
+u([r], x.prototype, "text", void 0), u([r({ attribute: "text-secondary" })], x.prototype, "textSecondary", void 0), u([r({ mode: "fromView" })], x.prototype, "placement", void 0), u([r({ mode: "boolean" })], x.prototype, "open", void 0), u([e], x.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/definition.ts
-var b = a("tooltip", y, (e) => {
-	let t = e.tagFor(u);
-	return r`
-${f()}
-${g(r`<span slot="_description" id="${(e) => e._descriptionId}">${(e) => e.text}</span>`)}
-<${t} class="${(e) => l("control", ["open", e.open])}" arrow alternate
+var S = o("tooltip", x, (e) => {
+	let t = e.tagFor(f);
+	return i`
+${m()}
+${v(i`<span slot="_description" id="${(e) => e._descriptionId}">${(e) => e.text}</span><span slot="_description-secondary" id="${(e) => e._descriptionSecondaryId}">${(e) => e.textSecondary}</span>`)}
+<${t} class="${(e) => d("control", ["open", e.open])}" arrow alternate
 	:placement=${(e) => e.placement}
 	:anchor="${(e) => e._anchorEl}"
 	:open="${(e) => e.open}"
 	@keydown="${(e, t) => {
-		e.open && _(t.event) && (e.open = !1);
+		e.open && y(t.event) && (e.open = !1);
 	}}"
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
 		<span class="text"><slot name="_description"></slot></span>
+		${l((e) => e.textSecondary, i`<span class="text-secondary"
+				><slot name="_description-secondary"></slot
+			></span>`)}
+		<slot
+			${c({
+		property: "_defaultSlotContent",
+		filter: s()
+	})}
+		></slot>
 		<slot name="kbd-shortcut"
-			${s({
+			${c({
 		property: "_kbdShortcutSlotted",
-		filter: o()
+		filter: s()
 	})}
 		></slot>
   </div>
 </${t}>`;
-}, [d], { styles: v }), x = t(b);
+}, [p], { styles: b }), C = n(S);
 //#endregion
-export { b as n, y as r, x as t };
+export { S as n, x as r, C as t };

package/bundled/extractOptions.cjs

@@ -0,0 +1 @@
+const e=require(`./option.cjs`),t=require(`./optgroup.cjs`);function n(n){let r=[];for(let i of n)if(e.n(i))r.push(i);else if(t.n(i))for(let t of Array.from(i.children))e.n(t)&&r.push(t);return r}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});

package/bundled/extractOptions.js

@@ -0,0 +1,11 @@
+import { n as e } from "./option.js";
+import { n as t } from "./optgroup.js";
+//#region src/shared/foundation/listbox/extractOptions.ts
+function n(n) {
+	let r = [];
+	for (let i of n) if (e(i)) r.push(i);
+	else if (t(i)) for (let t of Array.from(i.children)) e(t) && r.push(t);
+	return r;
+}
+//#endregion
+export { n as t };

package/bundled/icon.cjs

@@ -0,0 +1 @@
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./numberConverter.cjs`);var r=500,i=2e3,a=class extends e.t{constructor(...e){super(...e),this.iconLoaded=!1,this.#e=0,this.#t=null}#e;#t;async nameChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let t=setTimeout(()=>{this.#e===e&&(this._svg=n.r,t=setTimeout(()=>{this.#e===e&&this._svg===n.r&&(this._svg=void 0)},i))},r);try{let t=await n.n(this.name,this.#t.signal);this.#e===e&&(this._svg=t)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(t),this.iconLoaded=!0)}}};t.t([e.m],a.prototype,`connotation`,void 0),t.t([e.m({converter:n.t})],a.prototype,`size`,void 0),t.t([e.A],a.prototype,`_svg`,void 0),t.t([e.A],a.prototype,`iconLoaded`,void 0),t.t([e.m],a.prototype,`label`,void 0),t.t([e.m],a.prototype,`name`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/bundled/icon.js

@@ -0,0 +1,34 @@
+import { A as e, m as t, t as n } from "./vivid-element.js";
+import { t as r } from "./decorate.js";
+import { n as i, r as a, t as o } from "./numberConverter.js";
+//#region src/lib/icon/icon.ts
+var s = 500, c = 2e3, l = class extends n {
+	constructor(...e) {
+		super(...e), this.iconLoaded = !1, this.#e = 0, this.#t = null;
+	}
+	#e;
+	#t;
+	async nameChanged() {
+		let e = ++this.#e;
+		this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
+		let t = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			this.#e === e && (this._svg = a, t = setTimeout(() => {
+				/* v8 ignore else -- @preserve */
+				this.#e === e && this._svg === a && (this._svg = void 0);
+			}, c));
+		}, s);
+		try {
+			let t = await i(this.name, this.#t.signal);
+			/* v8 ignore else -- @preserve */
+			this.#e === e && (this._svg = t);
+		} catch {
+			this.#e === e && (this._svg = void 0);
+		} finally {
+			this.#e === e && (clearTimeout(t), this.iconLoaded = !0);
+		}
+	}
+};
+r([t], l.prototype, "connotation", void 0), r([t({ converter: o })], l.prototype, "size", void 0), r([e], l.prototype, "_svg", void 0), r([e], l.prototype, "iconLoaded", void 0), r([t], l.prototype, "label", void 0), r([t], l.prototype, "name", void 0);
+//#endregion
+export { l as t };

package/bundled/listbox.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`),r=require(`./aria-binding-directive.cjs`),i=require(`./definition17.cjs`);function a(e,t){let n=e.length;for(;n--;)if(t(e[n],n,e))return n;return-1}var o=class t extends e.t{constructor(...e){super(...e),this._options=[],this.selectedIndex=-1,this.selectedOptions=[],this.shouldSkipFocus=!1,this.typeaheadBuffer=``,this.typeaheadExpired=!0,this.typeaheadTimeout=-1,this._activeDescendant=null}get firstSelectedOption(){return this.selectedOptions[0]??null}get length(){return this.options.length}get options(){return e.k.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.k.notify(this,`options`),this.$fastController.isConnected){let e=this._newDefaultSelectedIndex(n,t,this.selectedIndex);e!==null&&(this.selectedIndex=e)}}static{this.slottedOptionFilter=e=>i.i(e)&&!e.hidden}static{this.TYPE_AHEAD_TIMEOUT_MS=1e3}clickHandler(e){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t&&!t.disabled)return this.selectedIndex=this.options.indexOf(t),!0}focusAndScrollOptionIntoView(e=this.firstSelectedOption){this.contains(document.activeElement)&&e!==null&&(e.focus(),requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})}))}focusinHandler(e){!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}getTypeaheadMatches(){let e=this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g,`\\$&`),t=RegExp(`^${e}`,`gi`);return this.options.filter(e=>e.text.trim().match(t))}getNextSelectableIndex(e){let t=this.options.reduce((t,n,r)=>!t&&!n.disabled&&r>=e?n:t,null);return this.options.indexOf(t)}getPreviousSelectableIndex(e){let t=this.options.reduceRight((t,n,r)=>!t&&!n.disabled&&r<=e?n:t,null);return this.options.indexOf(t)}handleChange(e,n){switch(n){case`selected`:t.slottedOptionFilter(e)&&(this.selectedIndex=this.options.indexOf(e)),this.setSelectedOptions();break}}handleTypeAhead(e){this.typeaheadTimeout&&window.clearTimeout(this.typeaheadTimeout),this.typeaheadTimeout=window.setTimeout(()=>this.typeaheadExpired=!0,t.TYPE_AHEAD_TIMEOUT_MS),this.typeaheadBuffer=`${this.typeaheadExpired?``:this.typeaheadBuffer}${e}`}keydownHandler(e){if(this.disabled)return!0;this.shouldSkipFocus=!1;let t=e.key;switch(t){case n.s:e.shiftKey||(e.preventDefault(),this.selectFirstOption());return;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());return;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());return;case`End`:e.preventDefault(),this.selectLastOption();return;case`Tab`:return this.focusAndScrollOptionIntoView(),!0;case n.a:case n.o:return!0;case` `:if(this.typeaheadExpired)return!0;default:return t.length===1&&this.handleTypeAhead(t),!0}}mousedownHandler(e){return this.shouldSkipFocus=!this.contains(document.activeElement),!0}selectedIndexChanged(e,t){let n=this._validSelectedIndex(t);if(t!==n){this.selectedIndex=n;return}this.setSelectedOptions()}_validSelectedIndex(e){return e>this.options.length-1||e<-1?-1:e}selectedOptionsChanged(n,r){let i=r.filter(t.slottedOptionFilter);this.options.forEach(t=>{let n=e.k.getNotifier(t);n.unsubscribe(this,`selected`),t.selected=i.includes(t),n.subscribe(this,`selected`)})}selectFirstOption(){this.disabled||(this.selectedIndex=this.options.findIndex(e=>!e.disabled))}selectLastOption(){this.disabled||(this.selectedIndex=a(this.options,e=>!e.disabled))}selectNextOption(){if(!this.disabled&&this.selectedIndex<this.options.length-1){let e=this.getNextSelectableIndex(this.selectedIndex+1);e!==-1&&(this.selectedIndex=e)}}selectPreviousOption(){if(!this.disabled&&this.selectedIndex>0){let e=this.getPreviousSelectableIndex(this.selectedIndex-1);e!==-1&&(this.selectedIndex=e)}}_newDefaultSelectedIndex(e,t,n){for(let[n,r]of t.entries())if(this._isDefaultSelected(r)&&!e.includes(r))return n;return null}_isDefaultSelected(e){return e.defaultSelected}setSelectedOptions(){this.selectedOptions=this.selectedIndex===-1?[]:[this.options[this.selectedIndex]],this._activeDescendant=this.firstSelectedOption?.id??``,this.focusAndScrollOptionIntoView()}slottedOptionsChanged(e,t){this.options=t.reduce((e,t)=>(i.i(t)&&e.push(t),e),[]);let n=`${this.options.length}`;this.options.forEach((e,t)=>{e.id||=r.r(`option-`),e.ariaPosInSet=`${t+1}`,e.ariaSetSize=n})}typeaheadBufferChanged(e,t){if(this.$fastController.isConnected){let e=this.getTypeaheadMatches();if(e.length){let t=this.options.indexOf(e[0]);t>-1&&(this.selectedIndex=t)}this.typeaheadExpired=!1}}};t.t([e.m({mode:`boolean`})],o.prototype,`disabled`,void 0),t.t([e.A],o.prototype,`selectedIndex`,void 0),t.t([e.A],o.prototype,`selectedOptions`,void 0),t.t([e.A],o.prototype,`slottedOptions`,void 0),t.t([e.A],o.prototype,`typeaheadBuffer`,void 0),t.t([e.A],o.prototype,`_activeDescendant`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./key-codes.cjs`),r=require(`./aria-binding-directive.cjs`),i=require(`./option.cjs`),a=require(`./optgroup.cjs`),o=require(`./extractOptions.cjs`);function s(e,t){let n=e.length;for(;n--;)if(t(e[n],n,e))return n;return-1}var c=class t extends e.t{constructor(...e){super(...e),this._options=[],this.selectedIndex=-1,this.selectedOptions=[],this.shouldSkipFocus=!1,this.typeaheadBuffer=``,this.typeaheadExpired=!0,this.typeaheadTimeout=-1,this._activeDescendant=null,this._onOptgroupChange=()=>{this.slottedOptionsChanged(void 0,this.slottedOptions)}}get firstSelectedOption(){return this.selectedOptions[0]??null}get length(){return this.options.length}get options(){return e.k.track(this,`options`),this._options}set options(t){let n=this._options;if(this._options=t,e.k.notify(this,`options`),this.$fastController.isConnected){let e=this._newDefaultSelectedIndex(n,t,this.selectedIndex);e!==null&&(this.selectedIndex=e)}}static{this.slottedOptionFilter=e=>i.n(e)&&!e.hidden||a.n(e)}static{this.TYPE_AHEAD_TIMEOUT_MS=1e3}clickHandler(e){let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t&&!t.disabled)return this.selectedIndex=this.options.indexOf(t),!0}focusAndScrollOptionIntoView(e=this.firstSelectedOption){this.contains(document.activeElement)&&e!==null&&(e.focus(),requestAnimationFrame(()=>{e.scrollIntoView({block:`nearest`})}))}focusinHandler(e){!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}getTypeaheadMatches(){let e=this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g,`\\$&`),t=RegExp(`^${e}`,`gi`);return this.options.filter(e=>e.text.trim().match(t))}getNextSelectableIndex(e){let t=this.options.reduce((t,n,r)=>!t&&!n.disabled&&r>=e?n:t,null);return this.options.indexOf(t)}getPreviousSelectableIndex(e){let t=this.options.reduceRight((t,n,r)=>!t&&!n.disabled&&r<=e?n:t,null);return this.options.indexOf(t)}handleChange(e,n){switch(n){case`selected`:t.slottedOptionFilter(e)&&(this.selectedIndex=this.options.indexOf(e)),this.setSelectedOptions();break}}handleTypeAhead(e){this.typeaheadTimeout&&window.clearTimeout(this.typeaheadTimeout),this.typeaheadTimeout=window.setTimeout(()=>this.typeaheadExpired=!0,t.TYPE_AHEAD_TIMEOUT_MS),this.typeaheadBuffer=`${this.typeaheadExpired?``:this.typeaheadBuffer}${e}`}keydownHandler(e){if(this.disabled)return!0;this.shouldSkipFocus=!1;let t=e.key;switch(t){case n.s:e.shiftKey||(e.preventDefault(),this.selectFirstOption());return;case n.t:e.shiftKey||(e.preventDefault(),this.selectNextOption());return;case n.i:e.shiftKey||(e.preventDefault(),this.selectPreviousOption());return;case`End`:e.preventDefault(),this.selectLastOption();return;case`Tab`:return this.focusAndScrollOptionIntoView(),!0;case n.a:case n.o:return!0;case` `:if(this.typeaheadExpired)return!0;default:return t.length===1&&this.handleTypeAhead(t),!0}}mousedownHandler(e){return this.shouldSkipFocus=!this.contains(document.activeElement),!0}selectedIndexChanged(e,t){let n=this._validSelectedIndex(t);if(t!==n){this.selectedIndex=n;return}this.setSelectedOptions()}_validSelectedIndex(e){return e>this.options.length-1||e<-1?-1:e}selectedOptionsChanged(n,r){let i=r.filter(t.slottedOptionFilter);this.options.forEach(t=>{let n=e.k.getNotifier(t);n.unsubscribe(this,`selected`),t.selected=i.includes(t),n.subscribe(this,`selected`)})}selectFirstOption(){this.disabled||(this.selectedIndex=this.options.findIndex(e=>!e.disabled))}selectLastOption(){this.disabled||(this.selectedIndex=s(this.options,e=>!e.disabled))}selectNextOption(){if(!this.disabled&&this.selectedIndex<this.options.length-1){let e=this.getNextSelectableIndex(this.selectedIndex+1);e!==-1&&(this.selectedIndex=e)}}selectPreviousOption(){if(!this.disabled&&this.selectedIndex>0){let e=this.getPreviousSelectableIndex(this.selectedIndex-1);e!==-1&&(this.selectedIndex=e)}}_newDefaultSelectedIndex(e,t,n){for(let[n,r]of t.entries())if(this._isDefaultSelected(r)&&!e.includes(r))return n;return null}_isDefaultSelected(e){return e.defaultSelected}_activeDescendantChanged(e,t){if(this.$fastController?.isConnected)for(let e of this.options)e._highlighted=!!(t&&e.id===t)}setSelectedOptions(){this.selectedOptions=this.selectedIndex===-1?[]:[this.options[this.selectedIndex]],this._activeDescendant=this.firstSelectedOption?.id??``,this.focusAndScrollOptionIntoView()}static extractOptions(e){return o.t(e)}slottedOptionsChanged(e,n){this.options=t.extractOptions(n);let i=`${this.options.length}`;this.options.forEach((e,t)=>{e.id||=r.r(`option-`),e.ariaPosInSet=`${t+1}`,e.ariaSetSize=i})}typeaheadBufferChanged(e,t){if(this.$fastController.isConnected){let e=this.getTypeaheadMatches();if(e.length){let t=this.options.indexOf(e[0]);t>-1&&(this.selectedIndex=t)}this.typeaheadExpired=!1}}connectedCallback(){super.connectedCallback(),this.addEventListener(`optgroup-change`,this._onOptgroupChange)}disconnectedCallback(){this.removeEventListener(`optgroup-change`,this._onOptgroupChange),super.disconnectedCallback()}};t.t([e.m({mode:`boolean`})],c.prototype,`disabled`,void 0),t.t([e.A],c.prototype,`selectedIndex`,void 0),t.t([e.A],c.prototype,`selectedOptions`,void 0),t.t([e.A],c.prototype,`slottedOptions`,void 0),t.t([e.A],c.prototype,`typeaheadBuffer`,void 0),t.t([e.A],c.prototype,`_activeDescendant`,void 0),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});

package/bundled/listbox.js

@@ -2,18 +2,22 @@ import { A as e, k as t, m as n, t as r } from "./vivid-element.js";
 import { t as i } from "./decorate.js";
 import { a, i as o, o as s, s as c, t as l } from "./key-codes.js";
 import { r as u } from "./aria-binding-directive.js";
-import { i as d } from "./definition17.js";
+import { n as d } from "./option.js";
+import { n as f } from "./optgroup.js";
+import { t as p } from "./extractOptions.js";
 //#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/array.js
-function f(e, t) {
+function m(e, t) {
 	let n = e.length;
 	for (; n--;) if (t(e[n], n, e)) return n;
 	return -1;
 }
 //#endregion
 //#region src/shared/foundation/listbox/listbox.ts
-var p = class e extends r {
+var h = class e extends r {
 	constructor(...e) {
-		super(...e), this._options = [], this.selectedIndex = -1, this.selectedOptions = [], this.shouldSkipFocus = !1, this.typeaheadBuffer = "", this.typeaheadExpired = !0, this.typeaheadTimeout = -1, this._activeDescendant = null;
+		super(...e), this._options = [], this.selectedIndex = -1, this.selectedOptions = [], this.shouldSkipFocus = !1, this.typeaheadBuffer = "", this.typeaheadExpired = !0, this.typeaheadTimeout = -1, this._activeDescendant = null, this._onOptgroupChange = () => {
+			this.slottedOptionsChanged(void 0, this.slottedOptions);
+		};
 	}
 	get firstSelectedOption() {
 		return this.selectedOptions[0] ?? null;
@@ -32,7 +36,7 @@ var p = class e extends r {
 		}
 	}
 	static {
-		this.slottedOptionFilter = (e) => d(e) && !e.hidden;
+		this.slottedOptionFilter = (e) => d(e) && !e.hidden || f(e);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -127,7 +131,7 @@ var p = class e extends r {
 	}
 	selectLastOption() {
 		/* v8 ignore else -- @preserve */
-		this.disabled || (this.selectedIndex = f(this.options, (e) => !e.disabled));
+		this.disabled || (this.selectedIndex = m(this.options, (e) => !e.disabled));
 	}
 	selectNextOption() {
 		/* v8 ignore else -- @preserve */
@@ -150,14 +154,20 @@ var p = class e extends r {
 	_isDefaultSelected(e) {
 		return e.defaultSelected;
 	}
+	_activeDescendantChanged(e, t) {
+		if (this.$fastController?.isConnected) for (let e of this.options) e._highlighted = !!(t && e.id === t);
+	}
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex === -1 ? [] : [this.options[this.selectedIndex]], this._activeDescendant = this.firstSelectedOption?.id ?? "", this.focusAndScrollOptionIntoView();
 	}
-	slottedOptionsChanged(e, t) {
-		this.options = t.reduce((e, t) => (d(t) && e.push(t), e), []);
-		let n = `${this.options.length}`;
+	static extractOptions(e) {
+		return p(e);
+	}
+	slottedOptionsChanged(t, n) {
+		this.options = e.extractOptions(n);
+		let r = `${this.options.length}`;
 		this.options.forEach((e, t) => {
-			e.id ||= u("option-"), e.ariaPosInSet = `${t + 1}`, e.ariaSetSize = n;
+			e.id ||= u("option-"), e.ariaPosInSet = `${t + 1}`, e.ariaSetSize = r;
 		});
 	}
 	typeaheadBufferChanged(e, t) {
@@ -172,7 +182,13 @@ var p = class e extends r {
 			this.typeaheadExpired = !1;
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("optgroup-change", this._onOptgroupChange);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("optgroup-change", this._onOptgroupChange), super.disconnectedCallback();
+	}
 };
-i([n({ mode: "boolean" })], p.prototype, "disabled", void 0), i([e], p.prototype, "selectedIndex", void 0), i([e], p.prototype, "selectedOptions", void 0), i([e], p.prototype, "slottedOptions", void 0), i([e], p.prototype, "typeaheadBuffer", void 0), i([e], p.prototype, "_activeDescendant", void 0);
+i([n({ mode: "boolean" })], h.prototype, "disabled", void 0), i([e], h.prototype, "selectedIndex", void 0), i([e], h.prototype, "selectedOptions", void 0), i([e], h.prototype, "slottedOptions", void 0), i([e], h.prototype, "typeaheadBuffer", void 0), i([e], h.prototype, "_activeDescendant", void 0);
 //#endregion
-export { p as t };
+export { h as t };

package/bundled/mixins.cjs

@@ -1,11 +1,11 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./render-in-light-dom.cjs`);var l=`:host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}`,u=class extends e.t(t.t){constructor(...e){super(...e),this.type=`none`}};a.t([t.m],u.prototype,`type`,void 0);function d(e,n,r){let i=e.tagFor(s.r);return t.p`<${i} class="icon" name="${n}" label="${e=>e.locale.feedbackMessage[r]}"></${i}>`}function f(e){let n={none:``,helper:``,error:d(e,`info-line`,`errorIconText`),success:d(e,`check-circle-line`,`successIconText`)};return t.p`${e=>n[e.type]}`}var p=e=>e===`error`,m=t.u(`feedback-message`,u,e=>{let n=t.p`<div
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./slotted.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./icon.cjs`),l=require(`./render-in-light-dom.cjs`);var u=`:host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}`,d=class extends e.t(t.t){constructor(...e){super(...e),this.type=`none`}};a.t([t.m],d.prototype,`type`,void 0);function f(e,n,r){let i=e.tagFor(c.t);return t.p`<${i} class="icon" name="${n}" label="${e=>e.locale.feedbackMessage[r]}"></${i}>`}function p(e){let n={none:``,helper:``,error:f(e,`info-line`,`errorIconText`),success:f(e,`check-circle-line`,`successIconText`)};return t.p`${e=>n[e.type]}`}var m=e=>e===`error`,h=t.u(`feedback-message`,d,e=>{let n=t.p`<div
 		class="${e=>o.t(`message`,`${e.type}-message`)}"
 	>
-		${f(e)}<slot></slot>
-	</div>`;return t.p`${r.t(e=>!p(e.type),n)}
+		${p(e)}<slot></slot>
+	</div>`;return t.p`${r.t(e=>!m(e.type),n)}
 		<span class="announcement" role="status" aria-live="polite">
-			${r.t(e=>p(e.type),n)}
-		</span>`},[s.t,i.n],{styles:l}),h=e=>{class r extends e{get _feedbackDescribedBy(){return`feedback slotted-helper-text-feedback`}_internalFeedback(){let e=this._helperTextSlottedContent?.length?``:this.helperText,t=this.errorValidationMessage,n=this.successText;return n?{type:`success`,message:n}:t?{type:`error`,message:t}:e?{type:`helper`,message:e}:{type:`none`,message:``}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type===`none`&&this._helperTextSlottedContent?.length?`helper`:`none`}_getFeedbackTemplate(e){let r=e.tagFor(u);return t.p`
+			${r.t(e=>m(e.type),n)}
+		</span>`},[s.t,i.n],{styles:u}),g=e=>{class r extends e{get _feedbackDescribedBy(){return`feedback slotted-helper-text-feedback`}_internalFeedback(){let e=this._helperTextSlottedContent?.length?``:this.helperText,t=this.errorValidationMessage,n=this.successText;return n?{type:`success`,message:n}:t?{type:`error`,message:t}:e?{type:`helper`,message:e}:{type:`none`,message:``}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type===`none`&&this._helperTextSlottedContent?.length?`helper`:`none`}_getFeedbackTemplate(e){let r=e.tagFor(d);return t.p`
 				<${r} id="feedback" :type="${e=>e._internalFeedback().type}">
 					${e=>e._internalFeedback().message}
 				</${r}>
@@ -15,9 +15,9 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 				>
 					<slot name="helper-text" ${n.t(`_helperTextSlottedContent`)}></slot>
 				</${r}>
-			`}}return a.t([t.m({attribute:`helper-text`})],r.prototype,`helperText`,void 0),a.t([t.A],r.prototype,`_helperTextSlottedContent`,void 0),r},g=e=>{let r=()=>`vvd-feedback-${c.n()}`,i=()=>`vvd-slotted-feedback-${c.n()}`;class o extends h(e){constructor(...e){super(...e),this._slottedHelperTextIds=[],this._feedbackId=r()}_helperTextSlottedContentChanged(e,t){for(let e of t)e.id||=i();this._slottedHelperTextIds=t.map(e=>e.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(` `)}_getFeedbackTemplate(e){let r=e.tagFor(u);return t.p`
+			`}}return a.t([t.m({attribute:`helper-text`})],r.prototype,`helperText`,void 0),a.t([t.A],r.prototype,`_helperTextSlottedContent`,void 0),r},_=e=>{let r=()=>`vvd-feedback-${l.n()}`,i=()=>`vvd-slotted-feedback-${l.n()}`;class o extends g(e){constructor(...e){super(...e),this._slottedHelperTextIds=[],this._feedbackId=r()}_helperTextSlottedContentChanged(e,t){for(let e of t)e.id||=i();this._slottedHelperTextIds=t.map(e=>e.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(` `)}_getFeedbackTemplate(e){let r=e.tagFor(d);return t.p`
 				<slot name="_feedback"></slot>
-				${c.t(t.p`<${r}
+				${l.t(t.p`<${r}
 					slot="_feedback"
 					id="${e=>e._feedbackId}"
 					:type="${e=>e._internalFeedback().type}"
@@ -30,4 +30,4 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
 						${n.t(`_helperTextSlottedContent`)}
 					></slot>
 				</${r}>
-			`}}return a.t([t.A],o.prototype,`_slottedHelperTextIds`,void 0),o};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
+			`}}return a.t([t.A],o.prototype,`_slottedHelperTextIds`,void 0),o};Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});

package/bundled/mixins.js

@@ -5,7 +5,8 @@ import { t as s } from "./when.js";
 import { n as c } from "./definition.js";
 import { t as l } from "./decorate.js";
 import { t as u } from "./class-names.js";
-import { r as d, t as f } from "./definition3.js";
+import { t as d } from "./definition3.js";
+import { t as f } from "./icon.js";
 import { n as p, t as m } from "./render-in-light-dom.js";
 //#region src/shared/feedback/feedback-message.scss?inline
 var h = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}", g = class extends e(i) {
@@ -15,7 +16,7 @@ var h = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typo
 };
 l([n], g.prototype, "type", void 0);
 function _(e, t, n) {
-	let i = e.tagFor(d);
+	let i = e.tagFor(f);
 	return r`<${i} class="icon" name="${t}" label="${(e) => e.locale.feedbackMessage[n]}"></${i}>`;
 }
 function v(e) {
@@ -37,7 +38,7 @@ var y = (e) => e === "error", b = a("feedback-message", g, (e) => {
 		<span class="announcement" role="status" aria-live="polite">
 			${s((e) => y(e.type), t)}
 		</span>`;
-}, [f, c], { styles: h }), x = (e) => {
+}, [d, c], { styles: h }), x = (e) => {
 	class i extends e {
 		get _feedbackDescribedBy() {
 			return "feedback slotted-helper-text-feedback";

package/bundled/optgroup.cjs

@@ -0,0 +1 @@
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./aria-binding-directive.cjs`),r=require(`./host-semantics.cjs`);function i(e){return e instanceof a}var a=class extends r.t(e.t){constructor(...e){super(...e),this._computedLabelledBy=null}_labelSlottedContentChanged(){let e=this._labelSlottedContent.filter(e=>e instanceof Element),t=[];for(let r of e)r.id||=n.r(`vvd-optgroup-label-`),t.push(r.id);this._computedLabelledBy=t.join(` `)}_onSlotChange(){this.$emit(`optgroup-change`,void 0,{bubbles:!0,composed:!0})}};t.t([e.A],a.prototype,`_labelSlottedContent`,void 0),t.t([e.A],a.prototype,`_computedLabelledBy`,void 0),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/bundled/optgroup.js

@@ -0,0 +1,27 @@
+import { A as e, t } from "./vivid-element.js";
+import { t as n } from "./decorate.js";
+import { r } from "./aria-binding-directive.js";
+import { t as i } from "./host-semantics.js";
+//#region src/lib/optgroup/optgroup.ts
+function a(e) {
+	return e instanceof o;
+}
+var o = class extends i(t) {
+	constructor(...e) {
+		super(...e), this._computedLabelledBy = null;
+	}
+	_labelSlottedContentChanged() {
+		let e = this._labelSlottedContent.filter((e) => e instanceof Element), t = [];
+		for (let n of e) n.id ||= r("vvd-optgroup-label-"), t.push(n.id);
+		this._computedLabelledBy = t.join(" ");
+	}
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+};
+n([e], o.prototype, "_labelSlottedContent", void 0), n([e], o.prototype, "_computedLabelledBy", void 0);
+//#endregion
+export { a as n, o as t };

package/bundled/option.cjs

@@ -0,0 +1 @@
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./dom.cjs`),r=require(`./affix.cjs`),i=require(`./host-semantics.cjs`);function a(e){return n.t(e)&&(e.getAttribute(`role`)===`option`||e instanceof HTMLOptionElement||e instanceof o)}var o=class extends i.t(r.n(e.t)){defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(e){this.defaultSelected=e}selectedChanged(){this.dirtySelected||=!0,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!=`string`){this.value=``;return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(e){this._label=e}set text(e){this._text=e}get text(){return this._text??``}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:``}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){let e=this.matchedText??this._vvdSearchText;if(e){let t=this.text.toLowerCase().indexOf(e.toLowerCase());return t===-1?{from:0,to:0}:{from:t,to:t+e.length}}return{from:0,to:0}}constructor(e,t,n,r){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value=``,this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText=``,this._isNotMatching=!1,e&&(this.text=e),t&&(this.value=t),n&&(this.defaultSelected=n),r&&(this.selected=r),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}connectedCallback(){super.connectedCallback(),this.dirtySelected||=(this.selected=this.defaultSelected,!1)}};t.t([e.m({converter:{fromView:e=>{if(e===!0||e===`true`)return!0;if(e===!1||e===`false`)return!1},toView:e=>e}})],o.prototype,`checked`,void 0),t.t([e.m({attribute:`selected`,mode:`boolean`})],o.prototype,`defaultSelected`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`disabled`,void 0),t.t([e.m({attribute:`current-selected`,mode:`boolean`})],o.prototype,`selected`,void 0),t.t([e.m({attribute:`value`})],o.prototype,`value`,void 0),t.t([e.m({attribute:`label`})],o.prototype,`_label`,void 0),t.t([e.m({attribute:`text`})],o.prototype,`_text`,void 0),t.t([e.m({attribute:`text-secondary`})],o.prototype,`textSecondary`,void 0),t.t([e.A],o.prototype,`_highlighted`,void 0),t.t([e.A],o.prototype,`_displayCheckmark`,void 0),t.t([e.m({attribute:`matched-text`})],o.prototype,`matchedText`,void 0),t.t([e.A],o.prototype,`_vvdSearchText`,void 0),t.t([e.j],o.prototype,`_hasMatchedText`,null),t.t([e.A],o.prototype,`_isNotMatching`,void 0),t.t([e.j],o.prototype,`_matchedRange`,null),t.t([e.m],o.prototype,`connotation`,void 0),t.t([e.m({attribute:`tag-connotation`})],o.prototype,`tagConnotation`,void 0),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/bundled/option.js

@@ -0,0 +1,93 @@
+import { A as e, j as t, m as n, t as r } from "./vivid-element.js";
+import { t as i } from "./decorate.js";
+import { t as a } from "./dom.js";
+import { n as o } from "./affix.js";
+import { t as s } from "./host-semantics.js";
+//#region src/lib/option/option.ts
+function c(e) {
+	return a(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof l);
+}
+var l = class extends s(o(r)) {
+	defaultSelectedChanged() {
+		this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
+	}
+	disabledChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
+	}
+	get selectedAttribute() {
+		return this.defaultSelected;
+	}
+	set selectedAttribute(e) {
+		this.defaultSelected = e;
+	}
+	selectedChanged() {
+		this.dirtySelected ||= !0, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
+	}
+	valueChanged() {
+		if (typeof this.value != "string") {
+			this.value = "";
+			return;
+		}
+		this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
+	}
+	get label() {
+		return this._label ?? this.text;
+	}
+	set label(e) {
+		this._label = e;
+	}
+	set text(e) {
+		this._text = e;
+	}
+	get text() {
+		return this._text ?? "";
+	}
+	_getAccessibleName() {
+		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	}
+	get form() {
+		return null;
+	}
+	get _hasMatchedText() {
+		return !!(this.matchedText ?? this._vvdSearchText);
+	}
+	get _matchedRange() {
+		let e = this.matchedText ?? this._vvdSearchText;
+		if (e) {
+			let t = this.text.toLowerCase().indexOf(e.toLowerCase());
+			return t === -1 ? {
+				from: 0,
+				to: 0
+			} : {
+				from: t,
+				to: t + e.length
+			};
+		}
+		return {
+			from: 0,
+			to: 0
+		};
+	}
+	constructor(e, t, n, r) {
+		super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, e && (this.text = e), t && (this.value = t), n && (this.defaultSelected = n), r && (this.selected = r), this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected), this.proxy.disabled = this.disabled;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.dirtySelected ||= (this.selected = this.defaultSelected, !1);
+	}
+};
+i([n({ converter: {
+	fromView: (e) => {
+		if (e === !0 || e === "true") return !0;
+		if (e === !1 || e === "false") return !1;
+	},
+	toView: (e) => e
+} })], l.prototype, "checked", void 0), i([n({
+	attribute: "selected",
+	mode: "boolean"
+})], l.prototype, "defaultSelected", void 0), i([n({ mode: "boolean" })], l.prototype, "disabled", void 0), i([n({
+	attribute: "current-selected",
+	mode: "boolean"
+})], l.prototype, "selected", void 0), i([n({ attribute: "value" })], l.prototype, "value", void 0), i([n({ attribute: "label" })], l.prototype, "_label", void 0), i([n({ attribute: "text" })], l.prototype, "_text", void 0), i([n({ attribute: "text-secondary" })], l.prototype, "textSecondary", void 0), i([e], l.prototype, "_highlighted", void 0), i([e], l.prototype, "_displayCheckmark", void 0), i([n({ attribute: "matched-text" })], l.prototype, "matchedText", void 0), i([e], l.prototype, "_vvdSearchText", void 0), i([t], l.prototype, "_hasMatchedText", null), i([e], l.prototype, "_isNotMatching", void 0), i([t], l.prototype, "_matchedRange", null), i([n], l.prototype, "connotation", void 0), i([n({ attribute: "tag-connotation" })], l.prototype, "tagConnotation", void 0);
+//#endregion
+export { c as n, l as t };

package/bundled/render-in-light-dom.cjs

@@ -1 +1 @@
-const e=require(`./vivid-element.cjs`);var t=[];for(let e=0;e<256;++e)t.push((e+256).toString(16).slice(1));function n(e,n=0){return(t[e[n+0]]+t[e[n+1]]+t[e[n+2]]+t[e[n+3]]+`-`+t[e[n+4]]+t[e[n+5]]+`-`+t[e[n+6]]+t[e[n+7]]+`-`+t[e[n+8]]+t[e[n+9]]+`-`+t[e[n+10]]+t[e[n+11]]+t[e[n+12]]+t[e[n+13]]+t[e[n+14]]+t[e[n+15]]).toLowerCase()}var r,i=new Uint8Array(16);function a(){if(!r){if(typeof crypto>`u`||!crypto.getRandomValues)throw Error(`crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported`);r=crypto.getRandomValues.bind(crypto)}return r(i)}var o={randomUUID:typeof crypto<`u`&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function s(e,t,r){if(o.randomUUID&&!t&&!e)return o.randomUUID();e||={};let i=e.random??e.rng?.()??a();if(i.length<16)throw Error(`Random bytes length must be >= 16`);if(i[6]=i[6]&15|64,i[8]=i[8]&63|128,t){if(r||=0,r<0||r+16>t.length)throw RangeError(`UUID byte range ${r}:${r+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[r+e]=i[e];return t}return n(i)}var c=()=>s(),l=class{constructor(e){this.template=e}createHTML(t){return e.C.comment(t(this))}createBehavior(){return this}bind(e){let t=this.template.create();t.bind(e.source,e.context),t.appendTo(e.source),e.onUnbind({unbind:()=>{t.firstChild.parentNode&&t.lastChild.parentNode?t.dispose():t.unbind()}})}};e.x.define(l);function u(e){return new l(e)}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
+const e=require(`./vivid-element.cjs`);var t=[];for(let e=0;e<256;++e)t.push((e+256).toString(16).slice(1));function n(e,n=0){return(t[e[n+0]]+t[e[n+1]]+t[e[n+2]]+t[e[n+3]]+`-`+t[e[n+4]]+t[e[n+5]]+`-`+t[e[n+6]]+t[e[n+7]]+`-`+t[e[n+8]]+t[e[n+9]]+`-`+t[e[n+10]]+t[e[n+11]]+t[e[n+12]]+t[e[n+13]]+t[e[n+14]]+t[e[n+15]]).toLowerCase()}var r=new Uint8Array(16);function i(){return crypto.getRandomValues(r)}function a(e,t,n){return!t&&!e&&crypto.randomUUID?crypto.randomUUID():o(e,t,n)}function o(e,t,r){e||={};let a=e.random??e.rng?.()??i();if(a.length<16)throw Error(`Random bytes length must be >= 16`);if(a[6]=a[6]&15|64,a[8]=a[8]&63|128,t){if(r||=0,r<0||r+16>t.length)throw RangeError(`UUID byte range ${r}:${r+15} is out of buffer bounds`);for(let e=0;e<16;++e)t[r+e]=a[e];return t}return n(a)}var s=()=>a(),c=class{constructor(e){this.template=e}createHTML(t){return e.C.comment(t(this))}createBehavior(){return this}bind(e){let t=this.template.create();t.bind(e.source,e.context),t.appendTo(e.source),e.onUnbind({unbind:()=>{t.firstChild.parentNode&&t.lastChild.parentNode?t.dispose():t.unbind()}})}};e.x.define(c);function l(e){return new c(e)}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/bundled/render-in-light-dom.js

@@ -1,27 +1,24 @@
 import { C as e, x as t } from "./vivid-element.js";
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/stringify.js
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/stringify.js
 var n = [];
 for (let e = 0; e < 256; ++e) n.push((e + 256).toString(16).slice(1));
 function r(e, t = 0) {
 	return (n[e[t + 0]] + n[e[t + 1]] + n[e[t + 2]] + n[e[t + 3]] + "-" + n[e[t + 4]] + n[e[t + 5]] + "-" + n[e[t + 6]] + n[e[t + 7]] + "-" + n[e[t + 8]] + n[e[t + 9]] + "-" + n[e[t + 10]] + n[e[t + 11]] + n[e[t + 12]] + n[e[t + 13]] + n[e[t + 14]] + n[e[t + 15]]).toLowerCase();
 }
 //#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/rng.js
-var i, a = new Uint8Array(16);
-function o() {
-	if (!i) {
-		if (typeof crypto > "u" || !crypto.getRandomValues) throw Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-		i = crypto.getRandomValues.bind(crypto);
-	}
-	return i(a);
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/rng.js
+var i = new Uint8Array(16);
+function a() {
+	return crypto.getRandomValues(i);
 }
-var s = { randomUUID: typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto) };
 //#endregion
-//#region ../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/esm-browser/v4.js
-function c(e, t, n) {
-	if (s.randomUUID && !t && !e) return s.randomUUID();
+//#region ../../node_modules/.pnpm/uuid@14.0.1/node_modules/uuid/dist/v4.js
+function o(e, t, n) {
+	return !t && !e && crypto.randomUUID ? crypto.randomUUID() : s(e, t, n);
+}
+function s(e, t, n) {
 	e ||= {};
-	let i = e.random ?? e.rng?.() ?? o();
+	let i = e.random ?? e.rng?.() ?? a();
 	if (i.length < 16) throw Error("Random bytes length must be >= 16");
 	if (i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, t) {
 		if (n ||= 0, n < 0 || n + 16 > t.length) throw RangeError(`UUID byte range ${n}:${n + 15} is out of buffer bounds`);
@@ -32,7 +29,7 @@ function c(e, t, n) {
 }
 //#endregion
 //#region src/shared/utils/randomId.ts
-var l = () => c(), u = class {
+var c = () => o(), l = class {
 	constructor(e) {
 		this.template = e;
 	}
@@ -49,9 +46,9 @@ var l = () => c(), u = class {
 		} });
 	}
 };
-t.define(u);
-function d(e) {
-	return new u(e);
+t.define(l);
+function u(e) {
+	return new l(e);
 }
 //#endregion
-export { l as n, d as t };
+export { c as n, u as t };