@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/form-associated.js

@@ -11,9 +11,7 @@ var InternalsMap = /* @__PURE__ */ new WeakMap();
 * This mixin also provides the `value`/... properties.
 */
 var FormAssociated = (Base) => {
-	/**
-	* @testQuery value value
-	*/
+	/** @testQuery value value */
 	class FormAssociatedElement extends Base {
 		/**
 		* Must evaluate to true to enable elementInternals.
@@ -24,9 +22,7 @@ var FormAssociated = (Base) => {
 		static get formAssociated() {
 			return supportsElementInternals;
 		}
-		/**
-		* Returns the validity state of the element
-		*/
+		/** Returns the validity state of the element */
 		get validity() {
 			return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
 		}
@@ -51,9 +47,7 @@ var FormAssociated = (Base) => {
 		get willValidate() {
 			return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
 		}
-		/**
-		* A reference to all associated label elements
-		*/
+		/** A reference to all associated label elements */
 		get labels() {
 			if (this.elementInternals) return Object.freeze(Array.from(this.elementInternals.labels));
 			else if (this.proxy instanceof HTMLElement && this.id) {
@@ -62,9 +56,7 @@ var FormAssociated = (Base) => {
 				return Object.freeze(forLabels.concat(Array.from(parentLabels)));
 			} else return emptyArray;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		valueChanged(_previous, _next) {
 			this.dirtyValue = true;
 			if (this.proxy instanceof HTMLElement) this.proxy.value = this.value;
@@ -81,32 +73,24 @@ var FormAssociated = (Base) => {
 		set currentValue(value) {
 			this.value = value;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		initialValueChanged(_previous, _next) {
 			if (!this.dirtyValue) {
 				this.value = this.initialValue;
 				this.dirtyValue = false;
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disabledChanged(_previous, _next) {
 			if (this.proxy instanceof HTMLElement) this.proxy.disabled = this.disabled;
 			Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		nameChanged(_previous, _next) {
 			/* v8 ignore if -- @preserve */
 			if (this.proxy instanceof HTMLElement) this.proxy.name = this.name;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		requiredChanged(_previous, _next) {
 			if (this.proxy instanceof HTMLElement) this.proxy.required = this.required;
 			Updates.enqueue(() => this.classList.toggle("required", this.required));
@@ -136,9 +120,7 @@ var FormAssociated = (Base) => {
 			this.initialValue = this.initialValue || "";
 			if (!this.elementInternals) this.formResetCallback = this.formResetCallback.bind(this);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.addEventListener("keypress", this._keypressHandler);
@@ -151,17 +133,13 @@ var FormAssociated = (Base) => {
 				if (this.form) this.form.addEventListener("reset", this.formResetCallback);
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.proxyEventsToBlock.forEach((name) => this.proxy.removeEventListener(name, this.stopPropagation));
 			if (!this.elementInternals && this.form) this.form.removeEventListener("reset", this.formResetCallback);
 		}
-		/**
-		* Return the current validity of the element.
-		*/
+		/** Return the current validity of the element. */
 		checkValidity() {
 			return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
 		}
@@ -204,9 +182,7 @@ var FormAssociated = (Base) => {
 		formDisabledCallback(disabled) {
 			this.disabled = disabled;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		formResetCallback() {
 			this.value = this.initialValue;
 			this.dirtyValue = false;
@@ -271,9 +247,7 @@ var FormAssociated = (Base) => {
 		setFormValue(value, state) {
 			if (this.elementInternals) this.elementInternals.setFormValue(value, state || value);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_keypressHandler(e) {
 			switch (e.key) {
 				case keyEnter:
@@ -300,9 +274,7 @@ var FormAssociated = (Base) => {
 	__decorate([attr({ mode: "boolean" })], FormAssociatedElement.prototype, "required", void 0);
 	return FormAssociatedElement;
 };
-/**
-* `current-checked` is inexplicably not a boolean attribute, so we need to convert from "true"/"false" to boolean.
-*/
+/** `current-checked` is inexplicably not a boolean attribute, so we need to convert from "true"/"false" to boolean. */
 var currentCheckedConverter = {
 	fromView(value) {
 		if (typeof value === "string") return value.toLowerCase() === "true";
@@ -312,9 +284,7 @@ var currentCheckedConverter = {
 		return value ? "true" : "false";
 	}
 };
-/**
-* Extends FormAssociated to provide `checked`/....
-*/
+/** Extends FormAssociated to provide `checked`/.... */
 var CheckableFormAssociated = (Base) => {
 	class CheckableFormAssociatedElement extends FormAssociated(Base) {
 		constructor(..._args) {
@@ -322,9 +292,7 @@ var CheckableFormAssociated = (Base) => {
 			this.dirtyChecked = false;
 			this.defaultChecked = false;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		defaultCheckedChanged() {
 			/* v8 ignore else -- @preserve */
 			if (!this.dirtyChecked) {
@@ -332,9 +300,7 @@ var CheckableFormAssociated = (Base) => {
 				this.dirtyChecked = false;
 			}
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		checkedChanged(prev, _next) {
 			if (!this.dirtyChecked) this.dirtyChecked = true;
 			this.updateForm();
@@ -362,23 +328,17 @@ var CheckableFormAssociated = (Base) => {
 		set currentChecked(value) {
 			this.checked = value;
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		updateForm() {
 			const value = this.checked ? this.value : null;
 			this.setFormValue(value, value);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.updateForm();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		formResetCallback() {
 			super.formResetCallback();
 			this.checked = this.defaultChecked;

package/unbundled/form-element.cjs

@@ -2,9 +2,7 @@ require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/form-elements/form-element.ts
-/**
-* Determines when to show the error message for form associated elements.
-*/
+/** Determines when to show the error message for form associated elements. */
 var FormElement = (Base) => {
 	/**
 	* @testSelector byLabel byLabel
@@ -32,32 +30,24 @@ var FormElement = (Base) => {
 				this.proxy.dispatchEvent(new Event("invalid"));
 			});
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
 		}
 		#handleInvalidEvent;
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		formResetCallback() {
 			this.forceErrorDisplay = false;
 			super.formResetCallback();
 			this.validate();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		validate() {
 			super.validate();
 			const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;

package/unbundled/form-element.js

@@ -1,9 +1,7 @@
 import { t as __decorate } from "./decorate.js";
 import { attr, observable } from "@microsoft/fast-element";
 //#region src/shared/patterns/form-elements/form-element.ts
-/**
-* Determines when to show the error message for form associated elements.
-*/
+/** Determines when to show the error message for form associated elements. */
 var FormElement = (Base) => {
 	/**
 	* @testSelector byLabel byLabel
@@ -31,32 +29,24 @@ var FormElement = (Base) => {
 				this.proxy.dispatchEvent(new Event("invalid"));
 			});
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		connectedCallback() {
 			super.connectedCallback();
 			this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
 		}
 		#handleInvalidEvent;
-		/**
-		* @internal
-		*/
+		/** @internal */
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		formResetCallback() {
 			this.forceErrorDisplay = false;
 			super.formResetCallback();
 			this.validate();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		validate() {
 			super.validate();
 			const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;

package/unbundled/host-semantics.cjs

@@ -12,9 +12,7 @@ function applyHostSemantics(boundProperties = {}) {
 		requireHost: true
 	});
 }
-/**
-* Mixin for components that place semantics on the host element.
-*/
+/** Mixin for components that place semantics on the host element. */
 var HostSemantics = (Base) => {
 	class HostSemanticsElement extends Base {
 		constructor(..._args) {

package/unbundled/host-semantics.js

@@ -12,9 +12,7 @@ function applyHostSemantics(boundProperties = {}) {
 		requireHost: true
 	});
 }
-/**
-* Mixin for components that place semantics on the host element.
-*/
+/** Mixin for components that place semantics on the host element. */
 var HostSemantics = (Base) => {
 	class HostSemanticsElement extends Base {
 		constructor(..._args) {

package/unbundled/kbd-shortcut.cjs

@@ -3,9 +3,7 @@ const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/kbd-shortcut.ts
 var WithKbdShortcut = (Base) => {
-	/**
-	* @slot kbd-shortcut - Used to display a keyboard shortcut.
-	*/
+	/** @slot kbd-shortcut - Used to display a keyboard shortcut. */
 	class WithKbdShortcutElement extends Base {
 		/** @internal */
 		_kbdShortcutSlottedChanged() {

package/unbundled/kbd-shortcut.js

@@ -2,9 +2,7 @@ import { t as __decorate } from "./decorate.js";
 import { observable } from "@microsoft/fast-element";
 //#region src/shared/patterns/kbd-shortcut.ts
 var WithKbdShortcut = (Base) => {
-	/**
-	* @slot kbd-shortcut - Used to display a keyboard shortcut.
-	*/
+	/** @slot kbd-shortcut - Used to display a keyboard shortcut. */
 	class WithKbdShortcutElement extends Base {
 		/** @internal */
 		_kbdShortcutSlottedChanged() {

package/unbundled/linkable.cjs

@@ -3,9 +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 {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
 var Linkable = (Base) => {
 	class LinkableElement extends require_delegates_aria.DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/linkable.js

@@ -2,9 +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 {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
 var Linkable = (Base) => {
 	class LinkableElement extends DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/listbox.cjs

@@ -2,6 +2,8 @@ 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_definition$1 = require("./definition30.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.
@@ -25,19 +30,11 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 	get firstSelectedOption() {
 		return this.selectedOptions[0] ?? null;
 	}
-	/**
-	* The number of options.
-	*
-	* @public
-	*/
+	/** The number of options. */
 	get length() {
 		return this.options.length;
 	}
-	/**
-	* The list of options.
-	*
-	* @public
-	*/
+	/** The list of options. */
 	get options() {
 		_microsoft_fast_element.Observable.track(this, "options");
 		return this._options;
@@ -52,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_definition.isListboxOption(n) && !n.hidden || require_definition$1.isOptgroup(n);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -254,11 +251,7 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 			notifier.subscribe(this, "selected");
 		});
 	}
-	/**
-	* Moves focus to the first selectable option.
-	*
-	* @public
-	*/
+	/** Moves focus to the first selectable option. */
 	selectFirstOption() {
 		/* v8 ignore else -- @preserve */
 		if (!this.disabled) this.selectedIndex = this.options.findIndex((o) => !o.disabled);
@@ -296,34 +289,36 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 			if (prevIndex !== -1) this.selectedIndex = prevIndex;
 		}
 	}
+	/** For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null. */
 	_newDefaultSelectedIndex(prev, next, _currentSelectedIndex) {
 		for (const [index, newOption] of next.entries()) if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) return index;
 		return null;
 	}
+	/** Whether an option should be considered defaultSelected */
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
-	/**
-	* Sets an option as selected and gives it focus.
-	*
-	* @public
-	*/
+	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
 		this._activeDescendant = this.firstSelectedOption?.id ?? "";
 		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-");
@@ -348,6 +343,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 { i as isOptgroup } from "./definition30.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.
@@ -24,19 +29,11 @@ var Listbox = class Listbox extends VividElement {
 	get firstSelectedOption() {
 		return this.selectedOptions[0] ?? null;
 	}
-	/**
-	* The number of options.
-	*
-	* @public
-	*/
+	/** The number of options. */
 	get length() {
 		return this.options.length;
 	}
-	/**
-	* The list of options.
-	*
-	* @public
-	*/
+	/** The list of options. */
 	get options() {
 		Observable.track(this, "options");
 		return this._options;
@@ -51,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;
@@ -253,11 +250,7 @@ var Listbox = class Listbox extends VividElement {
 			notifier.subscribe(this, "selected");
 		});
 	}
-	/**
-	* Moves focus to the first selectable option.
-	*
-	* @public
-	*/
+	/** Moves focus to the first selectable option. */
 	selectFirstOption() {
 		/* v8 ignore else -- @preserve */
 		if (!this.disabled) this.selectedIndex = this.options.findIndex((o) => !o.disabled);
@@ -295,34 +288,36 @@ var Listbox = class Listbox extends VividElement {
 			if (prevIndex !== -1) this.selectedIndex = prevIndex;
 		}
 	}
+	/** For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null. */
 	_newDefaultSelectedIndex(prev, next, _currentSelectedIndex) {
 		for (const [index, newOption] of next.entries()) if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) return index;
 		return null;
 	}
+	/** Whether an option should be considered defaultSelected */
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
-	/**
-	* Sets an option as selected and gives it focus.
-	*
-	* @public
-	*/
+	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
 		this._activeDescendant = this.firstSelectedOption?.id ?? "";
 		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-");
@@ -347,6 +342,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/localized.cjs

@@ -15,23 +15,17 @@ var setLocale = (locale) => {
 };
 //#endregion
 //#region src/shared/patterns/localized.ts
-/**
-* Mixin for elements that need to access the current locale.
-*/
+/** Mixin for elements that need to access the current locale. */
 var Localized = (Base) => {
 	class LocalizedElement extends Base {
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get locale() {
 			return currentLocale.locale;
 		}
 	}
 	return LocalizedElement;
 };
-/**
-* Mixin for Localized elements that need to observe locale changes.
-*/
+/** Mixin for Localized elements that need to observe locale changes. */
 var WithObservableLocale = (Base) => {
 	class WithObservableLocaleElement extends Localized(Base) {
 		/**

package/unbundled/localized.js

@@ -14,23 +14,17 @@ var setLocale = (locale) => {
 };
 //#endregion
 //#region src/shared/patterns/localized.ts
-/**
-* Mixin for elements that need to access the current locale.
-*/
+/** Mixin for elements that need to access the current locale. */
 var Localized = (Base) => {
 	class LocalizedElement extends Base {
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get locale() {
 			return currentLocale.locale;
 		}
 	}
 	return LocalizedElement;
 };
-/**
-* Mixin for Localized elements that need to observe locale changes.
-*/
+/** Mixin for Localized elements that need to observe locale changes. */
 var WithObservableLocale = (Base) => {
 	class WithObservableLocaleElement extends Localized(Base) {
 		/**