@vonage/vivid 5.23.0 → 5.23.1

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

@@ -25,19 +25,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;
@@ -254,11 +246,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,18 +284,16 @@ 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 ?? "";

package/unbundled/listbox.js

@@ -24,19 +24,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;
@@ -253,11 +245,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,18 +283,16 @@ 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 ?? "";

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) {
 		/**

package/unbundled/mixins.cjs

@@ -3,7 +3,7 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition6.cjs");
+const require_definition$1 = require("./definition22.cjs");
 const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -11,9 +11,7 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 var feedback_message_default = ":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}";
 //#endregion
 //#region src/shared/feedback/feedback-message.ts
-/**
-* Renders a feedback message of the given type. When type='none', nothing is rendered.
-*/
+/** Renders a feedback message of the given type. When type='none', nothing is rendered. */
 var FeedbackMessage = class extends require_localized.Localized(require_vivid_element.VividElement) {
 	constructor(..._args) {
 		super(..._args);
@@ -49,9 +47,7 @@ var FeedbackMessageTemplate = (ctx) => {
 var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: feedback_message_default });
 //#endregion
 //#region src/shared/feedback/mixins.ts
-/**
-* Mixin for elements that display a feedback message.
-*/
+/** Mixin for elements that display a feedback message. */
 var WithFeedback = (Base) => {
 	class ElementWithFeedback extends Base {
 		/**
@@ -62,9 +58,7 @@ var WithFeedback = (Base) => {
 		get _feedbackDescribedBy() {
 			return "feedback slotted-helper-text-feedback";
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_internalFeedback() {
 			const helperText = this._helperTextSlottedContent?.length ? "" : this.helperText;
 			const errorText = this.errorValidationMessage;
@@ -86,15 +80,11 @@ var WithFeedback = (Base) => {
 				message: ""
 			};
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_slottedHelperTextFeedbackType() {
 			return this._internalFeedback().type === "none" && this._helperTextSlottedContent?.length ? "helper" : "none";
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_getFeedbackTemplate(ctx) {
 			const feedbackTag = ctx.tagFor(FeedbackMessage);
 			return _microsoft_fast_element.html`
@@ -127,24 +117,18 @@ var WithLightDOMFeedback = (Base) => {
 			this._slottedHelperTextIds = [];
 			this._feedbackId = randomFeedbackId();
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_helperTextSlottedContentChanged(_, newContent) {
 			for (const el of newContent)
  /* v8 ignore else -- @preserve */
 			if (!el.id) el.id = randomSlottedContentId();
 			this._slottedHelperTextIds = newContent.map((el) => el.id);
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		get _feedbackDescribedBy() {
 			return [this._feedbackId, ...this._slottedHelperTextIds].join(" ");
 		}
-		/**
-		* @internal
-		*/
+		/** @internal */
 		_getFeedbackTemplate(ctx) {
 			const feedbackTag = ctx.tagFor(FeedbackMessage);
 			return _microsoft_fast_element.html`