@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition29.js

@@ -1,162 +1,11 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
-import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { attr, html, observable, volatile, when } from "@microsoft/fast-element";
-import { classNames, isHTMLElement } from "@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 isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
-}
-/**
-* Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA 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 of Searchable Select.
-* @slot trailing-meta - For additional elements at the end of the Option.
-* @testAction click click #locator
-*/
-var ListboxOption = class extends HostSemantics(AffixIconWithTrailing(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;
-	}
-	/** @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;
-		}
-	}
-};
-__decorate([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);
-__decorate([attr({
-	attribute: "selected",
-	mode: "boolean"
-})], ListboxOption.prototype, "defaultSelected", void 0);
-__decorate([attr({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
-__decorate([attr({
-	attribute: "current-selected",
-	mode: "boolean"
-})], ListboxOption.prototype, "selected", void 0);
-__decorate([attr({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
-__decorate([attr({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
-__decorate([attr({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
-__decorate([attr({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
-__decorate([observable], ListboxOption.prototype, "_highlighted", void 0);
-__decorate([observable], ListboxOption.prototype, "_displayCheckmark", void 0);
-__decorate([attr({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
-__decorate([observable], ListboxOption.prototype, "_vvdSearchText", void 0);
-__decorate([volatile], ListboxOption.prototype, "_hasMatchedText", null);
-__decorate([observable], ListboxOption.prototype, "_isNotMatching", void 0);
-__decorate([volatile], ListboxOption.prototype, "_matchedRange", null);
-__decorate([attr], ListboxOption.prototype, "connotation", void 0);
-__decorate([attr({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
-//#endregion
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
+import { t as Icon } from "./icon.js";
+import { a as affixIconTemplateFactory, i as IconWrapper } from "./affix.js";
+import { n as applyHostSemantics } from "./host-semantics.js";
+import { t as ListboxOption } from "./option.js";
+import { html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/option/option.template.ts
 function text() {
 	return html`${when((x) => x.text || x.textSecondary, html`<span class="text">
@@ -182,7 +31,7 @@ var ListboxOptionTemplate = (context) => {
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div
-				class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
+				class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
 			>
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${text()}
 				<slot name="trailing-meta"></slot>
@@ -194,7 +43,7 @@ var ListboxOptionTemplate = (context) => {
 //#endregion
 //#region src/lib/option/definition.ts
 /** @internal */
-var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.active,.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}:host([current-selected]) .base:not(.highlighted,.active){--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
+var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
 /**
 * Registers the listbox-option elements with the design system.
 *
@@ -202,4 +51,4 @@ var listboxOptionDefinition = defineVividComponent("option", ListboxOption, List
 */
 var registerOption = createRegisterFunction(listboxOptionDefinition);
 //#endregion
-export { isListboxOption as i, registerOption as n, ListboxOption as r, listboxOptionDefinition as t };
+export { registerOption as n, listboxOptionDefinition as t };

package/unbundled/definition30.cjs

@@ -1,57 +1,8 @@
 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");
+const require_optgroup = require("./optgroup.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 - Default slot for options.
-* @slot label - Label for the option group.
-*/
-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
 //#region src/lib/optgroup/optgroup.template.ts
 var OptgroupTemplate = () => {
 	return _microsoft_fast_element.html`
@@ -77,7 +28,7 @@ var OptgroupTemplate = () => {
 //#endregion
 //#region src/lib/optgroup/definition.ts
 /** @internal */
-var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup", Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
+var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup", require_optgroup.Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
 /**
 * Registers the optgroup element with the design system.
 *
@@ -85,18 +36,6 @@ var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup",
 */
 var registerOptgroup = require_vivid_element.createRegisterFunction(optgroupDefinition);
 //#endregion
-Object.defineProperty(exports, "Optgroup", {
-	enumerable: true,
-	get: function() {
-		return Optgroup;
-	}
-});
-Object.defineProperty(exports, "isOptgroup", {
-	enumerable: true,
-	get: function() {
-		return isOptgroup;
-	}
-});
 Object.defineProperty(exports, "optgroupDefinition", {
 	enumerable: true,
 	get: function() {

package/unbundled/definition30.js

@@ -1,56 +1,7 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { t as __decorate } from "./decorate.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { html, observable, slotted } 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 - Default slot for options.
-* @slot label - Label for the option group.
-*/
-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
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { n as applyHostSemantics } from "./host-semantics.js";
+import { t as Optgroup } from "./optgroup.js";
+import { html, slotted } from "@microsoft/fast-element";
 //#region src/lib/optgroup/optgroup.template.ts
 var OptgroupTemplate = () => {
 	return html`
@@ -84,4 +35,4 @@ var optgroupDefinition = defineVividComponent("optgroup", Optgroup, OptgroupTemp
 */
 var registerOptgroup = createRegisterFunction(optgroupDefinition);
 //#endregion
-export { isOptgroup as i, registerOptgroup as n, Optgroup as r, optgroupDefinition as t };
+export { registerOptgroup as n, optgroupDefinition as t };

package/unbundled/definition31.cjs

@@ -13,7 +13,9 @@ const require_with_error_text = require("./with-error-text.cjs");
 const require_with_success_text = require("./with-success-text.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_text_field = require("./text-field.cjs");
+const require_option = require("./option.cjs");
 const require_definition$3 = require("./definition29.cjs");
+const require_optgroup = require("./optgroup.cjs");
 const require_definition$4 = require("./definition30.cjs");
 const require_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -64,7 +66,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
 		this.value = this.firstSelectedOption?.text || "";
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the element against its constraints (e.g. `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}
@@ -151,8 +153,8 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 			this._options.forEach((o) => {
 				o.hidden = !this.filteredOptions.includes(o);
 			});
-			for (const el of Array.from(this.children)) if (require_definition$4.isOptgroup(el)) {
-				const hasVisibleOption = Array.from(el.children).some((child) => require_definition$3.isListboxOption(child) && !child.hidden);
+			for (const el of Array.from(this.children)) if (require_optgroup.isOptgroup(el)) {
+				const hasVisibleOption = Array.from(el.children).some((child) => require_option.isListboxOption(child) && !child.hidden);
 				el.style.display = hasVisibleOption ? "" : "none";
 			}
 		}

package/unbundled/definition31.js

@@ -12,8 +12,10 @@ import { t as WithErrorText } from "./with-error-text.js";
 import { t as WithSuccessText } from "./with-success-text.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { t as text_field_default } from "./text-field.js";
-import { i as isListboxOption, t as listboxOptionDefinition } from "./definition29.js";
-import { i as isOptgroup, t as optgroupDefinition } from "./definition30.js";
+import { n as isListboxOption } from "./option.js";
+import { t as listboxOptionDefinition } from "./definition29.js";
+import { n as isOptgroup } from "./optgroup.js";
+import { t as optgroupDefinition } from "./definition30.js";
 import { t as Listbox } from "./listbox.js";
 import { Observable, attr, html, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames, limit, uniqueId } from "@microsoft/fast-web-utilities";
@@ -63,7 +65,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
 		this.value = this.firstSelectedOption?.text || "";
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the element against its constraints (e.g. `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}

package/unbundled/definition32.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_utils = require("./utils.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/lib/country/country.scss?inline
@@ -31,7 +32,7 @@ require_decorate.__decorate([_microsoft_fast_element.attr], Country.prototype, "
 //#endregion
 //#region src/lib/country/country.template.ts
 var CountryTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
 		<div class="base">
 			<slot name="icon" class="icon">

package/unbundled/definition32.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, 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 getFlagIconName } from "./utils.js";
 import { attr, html, when } from "@microsoft/fast-element";
 //#region src/lib/country/country.scss?inline

package/unbundled/definition35.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_key_codes = require("./key-codes.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
@@ -1868,7 +1869,7 @@ function calculateAriaSelectedValue(x) {
 	return null;
 }
 function renderSortIcons(c) {
-	const iconTag = c.tagFor(require_definition.Icon);
+	const iconTag = c.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
 		${(0, _microsoft_fast_element.when)(shouldShowSortIcons, _microsoft_fast_element.html`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>

package/unbundled/definition35.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, 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 keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";

package/unbundled/definition37.cjs

@@ -17,7 +17,7 @@ let _microsoft_fast_element = require("@microsoft/fast-element");
 *
 * @public
 * @component date-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Date Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/definition37.js

@@ -16,7 +16,7 @@ import { volatile } from "@microsoft/fast-element";
 *
 * @public
 * @component date-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Date Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/definition39.cjs

@@ -52,7 +52,7 @@ var ValidDateTimeFilter = {
 *
 * @public
 * @component date-time-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Date Time Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/definition39.js

@@ -51,7 +51,7 @@ var ValidDateTimeFilter = {
 *
 * @public
 * @component date-time-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Date Time Picker. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
 * @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`

package/unbundled/definition40.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("./definition6.cjs");
 const require_definition$2 = require("./definition22.cjs");
@@ -54,6 +55,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 		this._errorAnnouncement = "";
 		this._forceAnnouncementToggle = false;
 	}
+	/** @internal */
 	valueChanged(_oldValue, newValue) {
 		if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
 			this._textFieldEl.value = newValue;
@@ -116,7 +118,7 @@ var DialPad = class extends require_localized.Localized(require_vivid_element.Vi
 	}
 	/**
 	* Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit
-	* button. Otherwise, the input field will be focused.
+	* button. Otherwise, the text field will be focused.
 	*/
 	focus() {
 		const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
@@ -413,7 +415,7 @@ function renderErrorAnnouncement(visuallyHiddenTag) {
 }
 var DialPadTemplate = (context) => {
 	const buttonTag = context.tagFor(require_definition$1.Button);
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	const textFieldTag = context.tagFor(require_definition$3.TextField);
 	const visuallyHiddenTag = context.tagFor(require_definition$2.VisuallyHidden);
 	return _microsoft_fast_element.html` <div

package/unbundled/definition40.js

@@ -1,6 +1,7 @@
 import { d as createRegisterFunction, 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 { i as Button, t as buttonDefinition } from "./definition6.js";
 import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
@@ -53,6 +54,7 @@ var DialPad = class extends Localized(VividElement) {
 		this._errorAnnouncement = "";
 		this._forceAnnouncementToggle = false;
 	}
+	/** @internal */
 	valueChanged(_oldValue, newValue) {
 		if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
 			this._textFieldEl.value = newValue;
@@ -115,7 +117,7 @@ var DialPad = class extends Localized(VividElement) {
 	}
 	/**
 	* Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit
-	* button. Otherwise, the input field will be focused.
+	* button. Otherwise, the text field will be focused.
 	*/
 	focus() {
 		const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");

package/unbundled/definition41.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_delegates_aria = require("./delegates-aria.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$1 = require("./definition6.cjs");
@@ -16,11 +17,11 @@ var dialog_default = ".base{white-space:initial;box-sizing:border-box;color:var(
 /**
 * @public
 * @component dialog
-* @slot graphic - Use the graphic slot in order to replace the icon.
-* @slot body - Use the body slot in order to add custom HTML to the dialog.
-* @slot footer - Use the footer slot in order to add action buttons to the bottom of the dialog.
-* @slot main - Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-* @slot action-items - Use the action-items slot in order to add action buttons to the bottom of the dialog.
+* @slot graphic - Use the graphic slot to replace the icon.
+* @slot body - Use the body slot to add custom HTML to the Dialog.
+* @slot footer - Use the footer slot to add additional content beside the action items.
+* @slot main - Assign nodes to the main slot to fully override a Dialog’s predefined flow and style with your own.
+* @slot action-items - Use the action-items slot to add action buttons to the bottom of the Dialog.
 * @event {CustomEvent<undefined>} open - The `open` event fires when the dialog opens.
 * @event {CustomEvent<string>} close - The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.
 * @event {CustomEvent<undefined>} cancel - The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.
@@ -65,6 +66,7 @@ var Dialog = class extends require_localized.Localized(require_delegates_aria.De
 			}
 		}
 	}
+	/** Gets or sets the Dialog's return value, often used to indicate which button the user pressed to close it. */
 	set returnValue(value) {
 		/* v8 ignore else -- @preserve */
 		if (this.#dialog) this.#dialog.returnValue = value;
@@ -119,13 +121,16 @@ var Dialog = class extends require_localized.Localized(require_delegates_aria.De
 			cancelable: true
 		})) this.open = false;
 	}
+	/** Closes the Dialog. */
 	close() {
 		this.open = false;
 	}
+	/** Opens the Dialog as non-modal. */
 	show() {
 		if (this._openedAsModal && !this.modal) throw new DOMException("Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.", "InvalidStateError");
 		this.open = true;
 	}
+	/** Opens the Dialog as modal. */
 	showModal() {
 		if (this.open && !this._openedAsModal) throw new DOMException("Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.", "InvalidStateError");
 		this._openedAsModal = true;
@@ -220,7 +225,7 @@ function renderDismissButton(buttonTag) {
 }
 var DialogTemplate = (context) => {
 	const elevationTag = context.tagFor(require_definition$2.Elevation);
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	const buttonTag = context.tagFor(require_definition$1.Button);
 	return _microsoft_fast_element.html`
 	<${elevationTag} dp="8" not-relative>