@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition29.js

@@ -10,13 +10,11 @@ import { classNames, isHTMLElement } from "@microsoft/fast-web-utilities";
 * Determines if the element is a {@link (ListboxOption:class)}
 *
 * @param element - the element to test.
-* @public
 */
 function isListboxOption(el) {
 	return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
 }
 /**
-* An Option Custom HTML Element.
 * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
 *
 * @public
@@ -38,9 +36,7 @@ var ListboxOption = class extends HostSemantics(AffixIconWithTrailing(VividEleme
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
 	}
-	/**
-	* @deprecated Use `defaultSelected` instead.
-	*/
+	/** @deprecated Use `defaultSelected` instead. */
 	get selectedAttribute() {
 		return this.defaultSelected;
 	}
@@ -122,9 +118,7 @@ var ListboxOption = class extends HostSemantics(AffixIconWithTrailing(VividEleme
 		this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
 		this.proxy.disabled = this.disabled;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.dirtySelected) {
@@ -164,7 +158,6 @@ __decorate([attr], ListboxOption.prototype, "connotation", void 0);
 __decorate([attr({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
 //#endregion
 //#region src/lib/option/option.template.ts
-var getClasses = (x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
 function text() {
 	return html`${when((x) => x.text || x.textSecondary, html`<span class="text">
 			${when((x) => x.text, html`<span class="text-primary">
@@ -188,7 +181,9 @@ var ListboxOptionTemplate = (context) => {
 	})}
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
-			<div class="${getClasses}">
+			<div
+				class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", 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>
 				${when((x) => x._displayCheckmark && x.selected, html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`)}
@@ -198,10 +193,8 @@ 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)}@supports (user-select:none){.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{--focus-stroke-color:var(--vvd-color-cta-500);--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))}.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)}" });
+/** @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{--focus-stroke-color:var(--vvd-color-cta-500);--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))}.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.
 *

package/unbundled/definition3.cjs

@@ -8,18 +8,11 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 //#endregion
 //#region src/lib/accordion/accordion.ts
-/**
-* Expand mode for {@link Accordion}
-* @public
-*/
+/** Expand mode for {@link Accordion} */
 var AccordionExpandMode$1 = {
-	/**
-	* Designates only a single AccordionItem can be open a time.
-	*/
+	/** Designates only a single AccordionItem can be open a time. */
 	single: "single",
-	/**
-	* Designates multiple AccordionItems can be open simultaneously.
-	*/
+	/** Designates multiple AccordionItems can be open simultaneously. */
 	multi: "multi"
 };
 /**
@@ -98,9 +91,7 @@ var Accordion = class extends require_vivid_element.VividElement {
 			}
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	accordionItemsChanged(oldValue) {
 		if (this.$fastController.isConnected) {
 			this.removeItemListeners(oldValue);
@@ -158,9 +149,7 @@ var AccordionExpandMode = {
 	single: "single",
 	multi: "multi"
 };
-/**
-* @internal
-*/
+/** @internal */
 var accordionDefinition = require_vivid_element.defineVividComponent("accordion", Accordion, AccordionTemplate, [require_definition.accordionItemDefinition], { styles: accordion_default });
 /**
 * Registers the accordion elements with the design system.

package/unbundled/definition3.js

@@ -7,18 +7,11 @@ import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } f
 var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 //#endregion
 //#region src/lib/accordion/accordion.ts
-/**
-* Expand mode for {@link Accordion}
-* @public
-*/
+/** Expand mode for {@link Accordion} */
 var AccordionExpandMode$1 = {
-	/**
-	* Designates only a single AccordionItem can be open a time.
-	*/
+	/** Designates only a single AccordionItem can be open a time. */
 	single: "single",
-	/**
-	* Designates multiple AccordionItems can be open simultaneously.
-	*/
+	/** Designates multiple AccordionItems can be open simultaneously. */
 	multi: "multi"
 };
 /**
@@ -97,9 +90,7 @@ var Accordion = class extends VividElement {
 			}
 		};
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	accordionItemsChanged(oldValue) {
 		if (this.$fastController.isConnected) {
 			this.removeItemListeners(oldValue);
@@ -157,9 +148,7 @@ var AccordionExpandMode = {
 	single: "single",
 	multi: "multi"
 };
-/**
-* @internal
-*/
+/** @internal */
 var accordionDefinition = defineVividComponent("accordion", Accordion, AccordionTemplate, [accordionItemDefinition], { styles: accordion_default });
 /**
 * Registers the accordion elements with the design system.

package/unbundled/definition30.cjs

@@ -4,27 +4,24 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_form_associated = require("./form-associated.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition$2 = require("./definition9.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
 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_definition$1 = require("./definition7.cjs");
-const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition10.cjs");
-const require_mixins = require("./mixins.cjs");
 const require_text_field = require("./text-field.cjs");
 const require_definition$3 = require("./definition29.cjs");
 const require_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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));--focus-stroke-gap-color:transparent}";
+var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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));--focus-stroke-gap-color:transparent}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
-/**
-* Autocomplete values for combobox.
-* @public
-*/
+/** Autocomplete values for combobox. */
 var ComboboxAutocomplete = {
 	inline: "inline",
 	list: "list",
@@ -60,9 +57,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		this.open = false;
 		this.proxy = document.createElement("input");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	formResetCallback() {
 		super.formResetCallback();
 		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
@@ -81,19 +76,11 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 	get isAutocompleteBoth() {
 		return this.autocomplete === ComboboxAutocomplete.both;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged() {
 		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 	}
-	/**
-	* A read-only list of options.
-	*
-	* @public
-	* @remarks
-	* Overrides `Listbox.options`.
-	*/
+	/** A read-only list of options. */
 	get options() {
 		_microsoft_fast_element.Observable.track(this, "options");
 		return this.filteredOptions.length ? this.filteredOptions : this._options;
@@ -109,9 +96,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(prev, next) {
 		if (this.$fastController.isConnected && this.options) {
 			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
@@ -157,11 +142,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		if (this.value) this.initialValue = this.value;
 		this._popup.anchor = this._anchor;
 	}
-	/**
-	* Filter available options by text value.
-	*
-	* @public
-	*/
+	/** Filter available options by text value. */
 	filterOptions() {
 		if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) this.filter = "";
 		this.filteredOptions = this._options.filter((o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
@@ -173,8 +154,6 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 	* Focus the control and scroll the first selected option into view.
 	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.focusAndScrollOptionIntoView`
 	*/
 	focusAndScrollOptionIntoView() {
 		if (this.contains(document.activeElement)) {
@@ -182,9 +161,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	enqueueScrollSelectedOptionIntoViewIfNeeded() {
 		const firstSelectedOption = this.firstSelectedOption;
 		/* v8 ignore else -- @preserve */
@@ -279,9 +256,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 			default: return true;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	setSelectedOptions() {
 		super.setSelectedOptions();
 		if (!this._isNavigatingWithKeyboard) this._activeDescendant = "";
@@ -308,8 +283,6 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 	* Move focus to the previous selectable option.
 	*
 	* @internal
-	* @remarks
-	* Overrides `Listbox.selectPreviousOption`
 	*/
 	selectPreviousOption() {
 		if (!this.disabled && this.selectedIndex >= 0) this.selectedIndex = this.selectedIndex - 1;
@@ -356,8 +329,6 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 	* @param next - the current list of selected options
 	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.selectedOptionsChanged`
 	*/
 	selectedOptionsChanged(_prev, next) {
 		if (this.$fastController.isConnected) this._options.forEach((o) => {
@@ -394,9 +365,7 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.text || this.control.value;
 		if (shouldEmit) this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	clearSelectionRange() {
 		const controlValueLength = this.control.value.length;
 		this.control.setSelectionRange(controlValueLength, controlValueLength);
@@ -423,7 +392,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
-var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", disabled], [`shape-${shape}`, Boolean(shape)], [`size-${scale}`, Boolean(scale)], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], ["no-label", !label], ["has-icon", !!icon || Boolean(iconSlottedContent?.length)], ["has-meta", Boolean(metaSlottedContent?.length)], ["has-activedescendant", Boolean(_activeDescendant) && open], ["error", Boolean(errorValidationMessage)], ["success", !!successText]);
 function renderLabel() {
 	return _microsoft_fast_element.html` <label for="control" class="label">
 		${(x) => x.label}
@@ -435,7 +403,10 @@ function setFixedDropdownVarWidth(x) {
 function renderInput(context) {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
-	return _microsoft_fast_element.html` <div class="${getStateClasses}" ${(0, _microsoft_fast_element.ref)("_anchor")}>
+	return _microsoft_fast_element.html` <div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.disabled], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["no-label", !x.label], ["has-icon", !!x.icon || Boolean(x.iconSlottedContent?.length)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText])}"
+		${(0, _microsoft_fast_element.ref)("_anchor")}
+	>
 		<div
 			class="label-wrapper"
 			?hidden=${(x) => !x.label && !x._hasContextualHelp}
@@ -522,9 +493,7 @@ var comboboxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/combobox/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var comboboxDefinition = require_vivid_element.defineVividComponent("combobox", Combobox, comboboxTemplate, [
 	require_definition.iconDefinition,
 	require_definition$2.popupDefinition,

package/unbundled/definition30.js

@@ -3,27 +3,24 @@ import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
 import { n as FormAssociated } from "./form-associated.js";
+import { r as chevronTemplateFactory } from "./definition6.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { t as FormElement } from "./form-element.js";
-import { t as WithSuccessText } from "./with-success-text.js";
 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 { r as chevronTemplateFactory } from "./definition7.js";
-import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { t as text_field_default } from "./text-field.js";
 import { t as listboxOptionDefinition } from "./definition29.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";
 //#region src/lib/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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));--focus-stroke-gap-color:transparent}";
+var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){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));--focus-stroke-gap-color:transparent}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
-/**
-* Autocomplete values for combobox.
-* @public
-*/
+/** Autocomplete values for combobox. */
 var ComboboxAutocomplete = {
 	inline: "inline",
 	list: "list",
@@ -59,9 +56,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		this.open = false;
 		this.proxy = document.createElement("input");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	formResetCallback() {
 		super.formResetCallback();
 		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
@@ -80,19 +75,11 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 	get isAutocompleteBoth() {
 		return this.autocomplete === ComboboxAutocomplete.both;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged() {
 		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 	}
-	/**
-	* A read-only list of options.
-	*
-	* @public
-	* @remarks
-	* Overrides `Listbox.options`.
-	*/
+	/** A read-only list of options. */
 	get options() {
 		Observable.track(this, "options");
 		return this.filteredOptions.length ? this.filteredOptions : this._options;
@@ -108,9 +95,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(prev, next) {
 		if (this.$fastController.isConnected && this.options) {
 			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
@@ -156,11 +141,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		if (this.value) this.initialValue = this.value;
 		this._popup.anchor = this._anchor;
 	}
-	/**
-	* Filter available options by text value.
-	*
-	* @public
-	*/
+	/** Filter available options by text value. */
 	filterOptions() {
 		if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) this.filter = "";
 		this.filteredOptions = this._options.filter((o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
@@ -172,8 +153,6 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 	* Focus the control and scroll the first selected option into view.
 	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.focusAndScrollOptionIntoView`
 	*/
 	focusAndScrollOptionIntoView() {
 		if (this.contains(document.activeElement)) {
@@ -181,9 +160,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	enqueueScrollSelectedOptionIntoViewIfNeeded() {
 		const firstSelectedOption = this.firstSelectedOption;
 		/* v8 ignore else -- @preserve */
@@ -278,9 +255,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 			default: return true;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	setSelectedOptions() {
 		super.setSelectedOptions();
 		if (!this._isNavigatingWithKeyboard) this._activeDescendant = "";
@@ -307,8 +282,6 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 	* Move focus to the previous selectable option.
 	*
 	* @internal
-	* @remarks
-	* Overrides `Listbox.selectPreviousOption`
 	*/
 	selectPreviousOption() {
 		if (!this.disabled && this.selectedIndex >= 0) this.selectedIndex = this.selectedIndex - 1;
@@ -355,8 +328,6 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 	* @param next - the current list of selected options
 	*
 	* @internal
-	* @remarks
-	* Overrides: `Listbox.selectedOptionsChanged`
 	*/
 	selectedOptionsChanged(_prev, next) {
 		if (this.$fastController.isConnected) this._options.forEach((o) => {
@@ -393,9 +364,7 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.text || this.control.value;
 		if (shouldEmit) this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	clearSelectionRange() {
 		const controlValueLength = this.control.value.length;
 		this.control.setSelectionRange(controlValueLength, controlValueLength);
@@ -422,7 +391,6 @@ __decorate([attr({
 __decorate([attr], Combobox.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
-var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => classNames("base", ["disabled", disabled], [`shape-${shape}`, Boolean(shape)], [`size-${scale}`, Boolean(scale)], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], ["no-label", !label], ["has-icon", !!icon || Boolean(iconSlottedContent?.length)], ["has-meta", Boolean(metaSlottedContent?.length)], ["has-activedescendant", Boolean(_activeDescendant) && open], ["error", Boolean(errorValidationMessage)], ["success", !!successText]);
 function renderLabel() {
 	return html` <label for="control" class="label">
 		${(x) => x.label}
@@ -434,7 +402,10 @@ function setFixedDropdownVarWidth(x) {
 function renderInput(context) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const chevronTemplate = chevronTemplateFactory(context);
-	return html` <div class="${getStateClasses}" ${ref("_anchor")}>
+	return html` <div
+		class="${(x) => classNames("base", ["disabled", x.disabled], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["no-label", !x.label], ["has-icon", !!x.icon || Boolean(x.iconSlottedContent?.length)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText])}"
+		${ref("_anchor")}
+	>
 		<div
 			class="label-wrapper"
 			?hidden=${(x) => !x.label && !x._hasContextualHelp}
@@ -521,9 +492,7 @@ var comboboxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/combobox/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var comboboxDefinition = defineVividComponent("combobox", Combobox, comboboxTemplate, [
 	iconDefinition,
 	popupDefinition,

package/unbundled/definition31.cjs

@@ -5,7 +5,7 @@ const require_decorate = require("./decorate.cjs");
 const require_utils = require("./utils.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/lib/country/country.scss?inline
-var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon vwc-icon{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/country/country.ts
 /**
@@ -47,9 +47,7 @@ var CountryTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/country/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var countryDefinition = require_vivid_element.defineVividComponent("country", Country, CountryTemplate, [require_definition.iconDefinition], { styles: country_default });
 /**
 * Registers the country element with the design system.

package/unbundled/definition31.js

@@ -4,7 +4,7 @@ import { t as __decorate } from "./decorate.js";
 import { t as getFlagIconName } from "./utils.js";
 import { attr, html, when } from "@microsoft/fast-element";
 //#region src/lib/country/country.scss?inline
-var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon vwc-icon{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/country/country.ts
 /**
@@ -46,9 +46,7 @@ var CountryTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/country/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var countryDefinition = defineVividComponent("country", Country, CountryTemplate, [iconDefinition], { styles: country_default });
 /**
 * Registers the country element with the design system.