@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/extractOptions.cjs

@@ -0,0 +1,21 @@
+const require_option = require("./option.cjs");
+const require_optgroup = require("./optgroup.cjs");
+//#region src/shared/foundation/listbox/extractOptions.ts
+/**
+* Extracts all options from a list of slotted elements, including options nested inside optgroups.
+*/
+function extractOptions(elements) {
+	const options = [];
+	for (const item of elements) if (require_option.isListboxOption(item)) options.push(item);
+	else if (require_optgroup.isOptgroup(item)) {
+		for (const child of Array.from(item.children)) if (require_option.isListboxOption(child)) options.push(child);
+	}
+	return options;
+}
+//#endregion
+Object.defineProperty(exports, "extractOptions", {
+	enumerable: true,
+	get: function() {
+		return extractOptions;
+	}
+});

package/unbundled/extractOptions.js

@@ -0,0 +1,16 @@
+import { n as isListboxOption } from "./option.js";
+import { n as isOptgroup } from "./optgroup.js";
+//#region src/shared/foundation/listbox/extractOptions.ts
+/**
+* Extracts all options from a list of slotted elements, including options nested inside optgroups.
+*/
+function extractOptions(elements) {
+	const options = [];
+	for (const item of elements) if (isListboxOption(item)) options.push(item);
+	else if (isOptgroup(item)) {
+		for (const child of Array.from(item.children)) if (isListboxOption(child)) options.push(child);
+	}
+	return options;
+}
+//#endregion
+export { extractOptions as t };

package/unbundled/icon.cjs

@@ -0,0 +1,67 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_numberConverter = require("./numberConverter.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/lib/icon/icon.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
+/**
+* @public
+* @component icon
+* @slot - Default slot.
+* @testQuery name name
+*/
+var Icon = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
+	}
+	#currentRequestId;
+	#abortController;
+	/** @internal */
+	async nameChanged() {
+		const requestId = ++this.#currentRequestId;
+		if (this.#abortController) this.#abortController.abort();
+		this.#abortController = new AbortController();
+		this._svg = void 0;
+		this.iconLoaded = false;
+		let timeout = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) {
+				this._svg = require_numberConverter.PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
+					/* v8 ignore else -- @preserve */
+					if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
+			}
+		}, PLACEHOLDER_DELAY);
+		try {
+			const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) this._svg = svg;
+		} catch {
+			if (this.#currentRequestId === requestId) this._svg = void 0;
+		} finally {
+			if (this.#currentRequestId === requestId) {
+				clearTimeout(timeout);
+				this.iconLoaded = true;
+			}
+		}
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "name", void 0);
+//#endregion
+Object.defineProperty(exports, "Icon", {
+	enumerable: true,
+	get: function() {
+		return Icon;
+	}
+});

package/unbundled/icon.js

@@ -0,0 +1,61 @@
+import { t as VividElement } from "./vivid-element.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
+import { t as __decorate } from "./decorate.js";
+import { attr, observable } from "@microsoft/fast-element";
+//#region src/lib/icon/icon.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
+/**
+* @public
+* @component icon
+* @slot - Default slot.
+* @testQuery name name
+*/
+var Icon = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
+	}
+	#currentRequestId;
+	#abortController;
+	/** @internal */
+	async nameChanged() {
+		const requestId = ++this.#currentRequestId;
+		if (this.#abortController) this.#abortController.abort();
+		this.#abortController = new AbortController();
+		this._svg = void 0;
+		this.iconLoaded = false;
+		let timeout = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) {
+				this._svg = PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
+					/* v8 ignore else -- @preserve */
+					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
+			}
+		}, PLACEHOLDER_DELAY);
+		try {
+			const svg = await resolveIcon(this.name, this.#abortController.signal);
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) this._svg = svg;
+		} catch {
+			if (this.#currentRequestId === requestId) this._svg = void 0;
+		} finally {
+			if (this.#currentRequestId === requestId) {
+				clearTimeout(timeout);
+				this.iconLoaded = true;
+			}
+		}
+	}
+};
+__decorate([attr], Icon.prototype, "connotation", void 0);
+__decorate([attr({ converter: numberConverter })], Icon.prototype, "size", void 0);
+__decorate([observable], Icon.prototype, "_svg", void 0);
+__decorate([observable], Icon.prototype, "iconLoaded", void 0);
+__decorate([attr], Icon.prototype, "label", void 0);
+__decorate([attr], Icon.prototype, "name", void 0);
+//#endregion
+export { Icon as t };

package/unbundled/linkable.cjs

@@ -3,7 +3,7 @@ const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/linkable.ts
-/** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
+/** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
 var Linkable = (Base) => {
 	class LinkableElement extends require_delegates_aria.DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/linkable.js

@@ -2,7 +2,7 @@ import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { attr, html, ref } from "@microsoft/fast-element";
 //#region src/shared/patterns/linkable.ts
-/** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
+/** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
 var Linkable = (Base) => {
 	class LinkableElement extends DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/listbox.cjs

@@ -1,7 +1,9 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition29.cjs");
+const require_option = require("./option.cjs");
+const require_optgroup = require("./optgroup.cjs");
+const require_extractOptions = require("./extractOptions.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/shared/foundation/listbox/listbox.ts
@@ -16,6 +18,9 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 		this.typeaheadExpired = true;
 		this.typeaheadTimeout = -1;
 		this._activeDescendant = null;
+		this._onOptgroupChange = () => {
+			this.slottedOptionsChanged(void 0, this.slottedOptions);
+		};
 	}
 	/**
 	* The first selected option.
@@ -44,7 +49,7 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 		}
 	}
 	static {
-		this.slottedOptionFilter = (n) => require_definition.isListboxOption(n) && !n.hidden;
+		this.slottedOptionFilter = (n) => require_option.isListboxOption(n) && !n.hidden || require_optgroup.isOptgroup(n);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -293,6 +298,11 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
+	/** @internal */
+	_activeDescendantChanged(_prev, next) {
+		if (!this.$fastController?.isConnected) return;
+		for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
+	}
 	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
@@ -300,16 +310,20 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 		this.focusAndScrollOptionIntoView();
 	}
 	/**
+	* Extracts all options from a list of slotted elements, including options nested inside optgroups.
+	*
+	* @internal
+	*/
+	static extractOptions(elements) {
+		return require_extractOptions.extractOptions(elements);
+	}
+	/**
 	* Updates the list of options and resets the selected option when the slotted option content changes.
 	*
 	* @internal
 	*/
 	slottedOptionsChanged(_, next) {
-		this.options = next.reduce((options, item) => {
-			/* v8 ignore else -- @preserve */
-			if (require_definition.isListboxOption(item)) options.push(item);
-			return options;
-		}, []);
+		this.options = Listbox.extractOptions(next);
 		const setSize = `${this.options.length}`;
 		this.options.forEach((option, index) => {
 			if (!option.id) option.id = (0, _microsoft_fast_web_utilities.uniqueId)("option-");
@@ -334,6 +348,14 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 			this.typeaheadExpired = false;
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("optgroup-change", this._onOptgroupChange);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("optgroup-change", this._onOptgroupChange);
+		super.disconnectedCallback();
+	}
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Listbox.prototype, "disabled", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.prototype, "selectedIndex", void 0);

package/unbundled/listbox.js

@@ -1,6 +1,8 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { i as isListboxOption } from "./definition29.js";
+import { n as isListboxOption } from "./option.js";
+import { n as isOptgroup } from "./optgroup.js";
+import { t as extractOptions } from "./extractOptions.js";
 import { Observable, attr, observable } from "@microsoft/fast-element";
 import { findLastIndex, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
 //#region src/shared/foundation/listbox/listbox.ts
@@ -15,6 +17,9 @@ var Listbox = class Listbox extends VividElement {
 		this.typeaheadExpired = true;
 		this.typeaheadTimeout = -1;
 		this._activeDescendant = null;
+		this._onOptgroupChange = () => {
+			this.slottedOptionsChanged(void 0, this.slottedOptions);
+		};
 	}
 	/**
 	* The first selected option.
@@ -43,7 +48,7 @@ var Listbox = class Listbox extends VividElement {
 		}
 	}
 	static {
-		this.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+		this.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden || isOptgroup(n);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -292,6 +297,11 @@ var Listbox = class Listbox extends VividElement {
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
+	/** @internal */
+	_activeDescendantChanged(_prev, next) {
+		if (!this.$fastController?.isConnected) return;
+		for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
+	}
 	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
@@ -299,16 +309,20 @@ var Listbox = class Listbox extends VividElement {
 		this.focusAndScrollOptionIntoView();
 	}
 	/**
+	* Extracts all options from a list of slotted elements, including options nested inside optgroups.
+	*
+	* @internal
+	*/
+	static extractOptions(elements) {
+		return extractOptions(elements);
+	}
+	/**
 	* Updates the list of options and resets the selected option when the slotted option content changes.
 	*
 	* @internal
 	*/
 	slottedOptionsChanged(_, next) {
-		this.options = next.reduce((options, item) => {
-			/* v8 ignore else -- @preserve */
-			if (isListboxOption(item)) options.push(item);
-			return options;
-		}, []);
+		this.options = Listbox.extractOptions(next);
 		const setSize = `${this.options.length}`;
 		this.options.forEach((option, index) => {
 			if (!option.id) option.id = uniqueId("option-");
@@ -333,6 +347,14 @@ var Listbox = class Listbox extends VividElement {
 			this.typeaheadExpired = false;
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("optgroup-change", this._onOptgroupChange);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("optgroup-change", this._onOptgroupChange);
+		super.disconnectedCallback();
+	}
 };
 __decorate([attr({ mode: "boolean" })], Listbox.prototype, "disabled", void 0);
 __decorate([observable], Listbox.prototype, "selectedIndex", void 0);

package/unbundled/mixins.cjs

@@ -2,6 +2,7 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$1 = require("./definition22.cjs");
 const require_randomId = require("./randomId.cjs");
@@ -20,7 +21,7 @@ var FeedbackMessage = class extends require_localized.Localized(require_vivid_el
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
 function iconTemplate(context, icon, textI18nKey) {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
 }
 function iconForType(context) {

package/unbundled/mixins.js

@@ -1,6 +1,7 @@
 import { t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { t as Localized } from "./localized.js";
 import { n as visuallyHiddenDefinition } from "./definition22.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";

package/unbundled/optgroup.cjs

@@ -0,0 +1,66 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/optgroup/optgroup.ts
+/**
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
+*/
+function isOptgroup(el) {
+	return el instanceof Optgroup;
+}
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*
+* @public
+* @component optgroup
+* @slot - Use the default slot to add Option elements to the group.
+* @slot label - Use the label slot to provide a label for the Optgroup.
+*/
+var Optgroup = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._computedLabelledBy = null;
+	}
+	/** @internal */
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = (0, _microsoft_fast_web_utilities.uniqueId)("vvd-optgroup-label-");
+			ids.push(el.id);
+		}
+		this._computedLabelledBy = ids.join(" ");
+	}
+	/**
+	* Handles changes to the default slot.
+	* Dispatches a bubbling, composed event so that parent components
+	* (Select, Combobox, Searchable Select) can re-process their options.
+	* @internal
+	*/
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: true,
+			composed: true
+		});
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_computedLabelledBy", void 0);
+//#endregion
+Object.defineProperty(exports, "Optgroup", {
+	enumerable: true,
+	get: function() {
+		return Optgroup;
+	}
+});
+Object.defineProperty(exports, "isOptgroup", {
+	enumerable: true,
+	get: function() {
+		return isOptgroup;
+	}
+});

package/unbundled/optgroup.js

@@ -0,0 +1,54 @@
+import { t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { t as HostSemantics } from "./host-semantics.js";
+import { observable } from "@microsoft/fast-element";
+import { uniqueId } from "@microsoft/fast-web-utilities";
+//#region src/lib/optgroup/optgroup.ts
+/**
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
+*/
+function isOptgroup(el) {
+	return el instanceof Optgroup;
+}
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*
+* @public
+* @component optgroup
+* @slot - Use the default slot to add Option elements to the group.
+* @slot label - Use the label slot to provide a label for the Optgroup.
+*/
+var Optgroup = class extends HostSemantics(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._computedLabelledBy = null;
+	}
+	/** @internal */
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = uniqueId("vvd-optgroup-label-");
+			ids.push(el.id);
+		}
+		this._computedLabelledBy = ids.join(" ");
+	}
+	/**
+	* Handles changes to the default slot.
+	* Dispatches a bubbling, composed event so that parent components
+	* (Select, Combobox, Searchable Select) can re-process their options.
+	* @internal
+	*/
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: true,
+			composed: true
+		});
+	}
+};
+__decorate([observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+__decorate([observable], Optgroup.prototype, "_computedLabelledBy", void 0);
+//#endregion
+export { isOptgroup as n, Optgroup as t };

package/unbundled/option.cjs

@@ -0,0 +1,176 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_affix = require("./affix.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/option/option.ts
+/**
+* Determines if the element is a {@link (ListboxOption:class)}
+*
+* @param element - the element to test.
+*/
+function isListboxOption(el) {
+	return (0, _microsoft_fast_web_utilities.isHTMLElement)(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
+}
+/**
+* Implements [ARIA option](https://www.w3.org/TR/wai-aria-1.1/#option).
+*
+* @public
+* @component option
+* @slot icon - The preferred way to add an icon to the component.
+* @slot tag-icon - Icon to be displayed in the tag when selected inside a Searchable Select.
+* @slot trailing-meta - For additional elements at the end of the Option.
+* @testAction click click #locator
+*/
+var ListboxOption = class extends require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_vivid_element.VividElement)) {
+	defaultSelectedChanged() {
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.defaultSelected;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.defaultSelected = this.defaultSelected;
+	}
+	disabledChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
+	}
+	/**
+	* Alias for `defaultSelected`, mirroring the option's initial selected state (the
+	* `selected` attribute). Distinct from `current-selected`, which reflects the
+	* option's live selected state.
+	* @deprecated Use `defaultSelected` instead.
+	*/
+	get selectedAttribute() {
+		return this.defaultSelected;
+	}
+	set selectedAttribute(value) {
+		this.defaultSelected = value;
+	}
+	selectedChanged() {
+		if (!this.dirtySelected) this.dirtySelected = true;
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.selected;
+	}
+	valueChanged() {
+		if (typeof this.value !== "string") {
+			this.value = "";
+			return;
+		}
+		if (this.proxy instanceof HTMLOptionElement) this.proxy.value = this.value;
+	}
+	get label() {
+		return this._label ?? this.text;
+	}
+	set label(value) {
+		this._label = value;
+	}
+	set text(value) {
+		this._text = value;
+	}
+	get text() {
+		return this._text ?? "";
+	}
+	/**
+	* Provides an accessible name for use by parent components.
+	* Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+	* @internal
+	*/
+	_getAccessibleName() {
+		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	}
+	get form() {
+		return null;
+	}
+	/** @internal */
+	get _hasMatchedText() {
+		return Boolean(this.matchedText ?? this._vvdSearchText);
+	}
+	/**
+	* From is inclusive, to is exclusive.
+	* @internal
+	*/
+	get _matchedRange() {
+		const matchedText = this.matchedText ?? this._vvdSearchText;
+		if (matchedText) {
+			const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
+			return matchIndex === -1 ? {
+				from: 0,
+				to: 0
+			} : {
+				from: matchIndex,
+				to: matchIndex + matchedText.length
+			};
+		}
+		return {
+			from: 0,
+			to: 0
+		};
+	}
+	constructor(text, value, defaultSelected, selected) {
+		super();
+		this.defaultSelected = false;
+		this.dirtySelected = false;
+		this.value = "";
+		this._highlighted = false;
+		this._displayCheckmark = false;
+		this._vvdSearchText = "";
+		this._isNotMatching = false;
+		if (text) this.text = text;
+		if (value) this.value = value;
+		if (defaultSelected) this.defaultSelected = defaultSelected;
+		if (selected) this.selected = selected;
+		this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
+		this.proxy.disabled = this.disabled;
+	}
+	/** @internal */
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.dirtySelected) {
+			this.selected = this.defaultSelected;
+			this.dirtySelected = false;
+		}
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: {
+	fromView: (value) => {
+		if (value === true || value === "true") return true;
+		if (value === false || value === "false") return false;
+	},
+	toView: (value) => value
+} })], ListboxOption.prototype, "checked", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "defaultSelected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "current-selected",
+	mode: "boolean"
+})], ListboxOption.prototype, "selected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_highlighted", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_displayCheckmark", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_vvdSearchText", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_hasMatchedText", null);
+require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_isNotMatching", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_matchedRange", null);
+require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
+//#endregion
+Object.defineProperty(exports, "ListboxOption", {
+	enumerable: true,
+	get: function() {
+		return ListboxOption;
+	}
+});
+Object.defineProperty(exports, "isListboxOption", {
+	enumerable: true,
+	get: function() {
+		return isListboxOption;
+	}
+});