@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition31.cjs

@@ -1,25 +1,28 @@
-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_affix = require("./affix.cjs");
+const require_component_enum = require("./component-enum.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_feedback_message = require("./feedback-message.cjs");
 const require_form_element = require("./form-element.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
 const require_with_success_text = require("./with-success-text.cjs");
+const require_mixins = require("./mixins.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");
 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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}";
+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}.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}.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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
 /** Autocomplete values for combobox. */
@@ -31,6 +34,7 @@ var ComboboxAutocomplete = {
 };
 //#endregion
 //#region src/lib/combobox/combobox.ts
+var comboboxAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component combobox
@@ -64,7 +68,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 +155,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";
 			}
 		}
@@ -204,11 +208,13 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 		if (!this.isAutocompleteInline) this.selectedIndex = this.options.map((option) => option.text).indexOf(this.control.value);
 		if (e.inputType.includes("deleteContent") || !this.filter.length) return true;
 		if (this.isAutocompleteList && !this.open) this.open = true;
-		if (this.isAutocompleteInline) if (this.filteredOptions.length) {
-			this.selectedOptions = [this.filteredOptions[0]];
-			this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-			this.setInlineSelection();
-		} else this.selectedIndex = -1;
+		if (this.isAutocompleteInline) {
+			if (this.filteredOptions.length) {
+				this.selectedOptions = [this.filteredOptions[0]];
+				this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+				this.setInlineSelection();
+			} else this.selectedIndex = -1;
+		}
 	}
 	/**
 	* Handle keydown actions for listbox navigation.
@@ -241,10 +247,8 @@ var Combobox = class extends require_with_contextual_help.WithContextualHelp(req
 				return;
 			case "Tab":
 				this.setInputToSelection();
-				if (!this.open) return true;
-				e.preventDefault();
 				this.open = false;
-				return;
+				return true;
 			case "ArrowUp":
 			case "ArrowDown":
 				this.filterOptions();
@@ -411,7 +415,7 @@ function renderInput(context) {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
 	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])}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `appearance-${comboboxAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["disabled", x.disabled], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["placeholder", Boolean(x.placeholder)], ["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
@@ -506,7 +510,7 @@ var comboboxDefinition = require_vivid_element.defineVividComponent("combobox",
 	require_definition$2.popupDefinition,
 	require_definition$3.listboxOptionDefinition,
 	require_definition$4.optgroupDefinition,
-	require_mixins.feedbackMessageDefinition
+	require_feedback_message.feedbackMessageDefinition
 ], {
 	styles: [require_text_field.text_field_default, combobox_default],
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition31.js

@@ -2,23 +2,27 @@ import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-
 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 { t as componentEnum } from "./component-enum.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 { n as feedbackMessageDefinition } from "./feedback-message.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithErrorText } from "./with-error-text.js";
 import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithFeedback } from "./mixins.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";
 //#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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}";
+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}.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}.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}}:host(:not(.has-activedescendant)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}";
 //#endregion
 //#region src/lib/combobox/combobox.options.ts
 /** Autocomplete values for combobox. */
@@ -30,6 +34,7 @@ var ComboboxAutocomplete = {
 };
 //#endregion
 //#region src/lib/combobox/combobox.ts
+var comboboxAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component combobox
@@ -63,7 +68,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);
 	}
@@ -203,11 +208,13 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 		if (!this.isAutocompleteInline) this.selectedIndex = this.options.map((option) => option.text).indexOf(this.control.value);
 		if (e.inputType.includes("deleteContent") || !this.filter.length) return true;
 		if (this.isAutocompleteList && !this.open) this.open = true;
-		if (this.isAutocompleteInline) if (this.filteredOptions.length) {
-			this.selectedOptions = [this.filteredOptions[0]];
-			this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-			this.setInlineSelection();
-		} else this.selectedIndex = -1;
+		if (this.isAutocompleteInline) {
+			if (this.filteredOptions.length) {
+				this.selectedOptions = [this.filteredOptions[0]];
+				this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+				this.setInlineSelection();
+			} else this.selectedIndex = -1;
+		}
 	}
 	/**
 	* Handle keydown actions for listbox navigation.
@@ -240,10 +247,8 @@ var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithS
 				return;
 			case "Tab":
 				this.setInputToSelection();
-				if (!this.open) return true;
-				e.preventDefault();
 				this.open = false;
-				return;
+				return true;
 			case "ArrowUp":
 			case "ArrowDown":
 				this.filterOptions();
@@ -410,7 +415,7 @@ function renderInput(context) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const chevronTemplate = chevronTemplateFactory(context);
 	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])}"
+		class="${(x) => classNames("base", `appearance-${comboboxAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["disabled", x.disabled], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["placeholder", Boolean(x.placeholder)], ["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

package/unbundled/definition32.cjs

@@ -1,7 +1,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 +31,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/definition33.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");

package/unbundled/definition34.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_numberConverter = require("./numberConverter.cjs");
 const require_decorate = require("./decorate.cjs");

package/unbundled/definition35.cjs

@@ -1,7 +1,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");
@@ -13,12 +13,12 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}";
 //#endregion
 //#region src/lib/data-grid/data-grid-row.scss?inline
-var data_grid_row_default = ".base.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-row-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-row-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-row-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-data-grid-row-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-data-grid-row-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-data-grid-row-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-row-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-row-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-row-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-row-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-data-grid-row-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-data-grid-row-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-data-grid-row-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-row-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.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;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
+var data_grid_row_default = ".base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}";
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.scss?inline
-var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-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.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;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
+var data_grid_cell_default = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size,var(--_data-grid-cell-default-block-size));color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_data-grid-cell-default-white-space:nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size:100%;--_data-grid-cell-default-white-space:normal}:host([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;
 var kernelAttr = "fast-kernel";
 try {
@@ -56,7 +56,6 @@ switch (kernelMode) {
 			contextEvent: `3.2${postfix}`,
 			elementRegistry: `4.2${postfix}`
 		});
-		break;
 }
 /**
 * Warning and error messages.
@@ -106,7 +105,7 @@ var isString = (object) => typeof object === "string";
 */
 var noop = () => void 0;
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
 (function ensureGlobalThis() {
 	if (typeof globalThis !== "undefined") return;
 	if (typeof global !== "undefined") global.globalThis = global;
@@ -147,7 +146,7 @@ var noop = () => void 0;
 	};
 })();
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/platform.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/platform.js
 var propConfig = {
 	configurable: false,
 	enumerable: false,
@@ -292,7 +291,7 @@ var DOM = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
 /**
 * An implementation of {@link Notifier} that efficiently keeps track of
 * subscribers interested in a specific change notification on an
@@ -426,7 +425,7 @@ var PropertyChangeNotifier = class {
 	}
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
 /**
 * The default UpdateQueue.
 * @public
@@ -478,7 +477,7 @@ var Updates$1 = FAST.getById(KernelServiceId.updateQueue, () => {
 	});
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
 /**
 * Describes how the source's lifetime relates to its controller's lifetime.
 * @public
@@ -757,7 +756,7 @@ var ExecutionContext = Object.freeze({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
 /**
 * A unique per-session random marker string used to create placeholder tokens in HTML.
 * Bindings embedded in template literals are replaced with interpolation markers
@@ -825,7 +824,7 @@ parse(value, factories) {
 	return result;
 } });
 //#endregion
-//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/utilities.js
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.5/node_modules/@microsoft/fast-element/dist/esm/utilities.js
 /**
 * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
 * control ViewBehaviors.
@@ -1102,12 +1101,11 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 				}
 				break;
 			case _microsoft_fast_web_utilities.keyEnd:
-				/* v8 ignore else -- @preserve */
-				if (e.ctrlKey && this.columnDefinitions !== null) {
-					e.preventDefault();
-					this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
-				}
-				break;
+ /* v8 ignore else -- @preserve */
+			if (e.ctrlKey && this.columnDefinitions !== null) {
+				e.preventDefault();
+				this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+			}
 		}
 	}
 	queueFocusUpdate() {
@@ -1493,12 +1491,10 @@ var DataGridRow = class extends require_host_semantics.HostSemantics(require_viv
 					e.preventDefault();
 				}
 				break;
-			case _microsoft_fast_web_utilities.keyEnd:
-				if (!e.ctrlKey) {
-					this.cellElements[this.cellElements.length - 1].focus();
-					e.preventDefault();
-				}
-				break;
+			case _microsoft_fast_web_utilities.keyEnd: if (!e.ctrlKey) {
+				this.cellElements[this.cellElements.length - 1].focus();
+				e.preventDefault();
+			}
 		}
 	}
 	updateItemTemplate() {
@@ -1679,13 +1675,11 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 					if (focusTarget !== null) focusTarget.focus();
 				}
 				break;
-			default:
-				if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
-					const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-					/* v8 ignore else -- @preserve */
-					if (focusTarget !== null) focusTarget.focus();
-				}
-				break;
+			default: if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+				const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+				/* v8 ignore else -- @preserve */
+				if (focusTarget !== null) focusTarget.focus();
+			}
 		}
 		this.$emit("cell-focused", this);
 	}
@@ -1711,23 +1705,20 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 							e.preventDefault();
 						}
 						break;
-					default:
-						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
-							const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-							/* v8 ignore else -- @preserve */
-							if (focusTarget !== null) focusTarget.focus();
-							e.preventDefault();
-						}
-						break;
+					default: if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+						const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+						/* v8 ignore else -- @preserve */
+						if (focusTarget !== null) focusTarget.focus();
+						e.preventDefault();
+					}
 				}
 				break;
 			case _microsoft_fast_web_utilities.keyEscape:
-				/* v8 ignore else -- @preserve */
-				if (this.contains(document.activeElement) && document.activeElement !== this) {
-					this.focus();
-					e.preventDefault();
-				}
-				break;
+ /* v8 ignore else -- @preserve */
+			if (this.contains(document.activeElement) && document.activeElement !== this) {
+				this.focus();
+				e.preventDefault();
+			}
 		}
 	}
 	updateCellView() {
@@ -1739,10 +1730,8 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 				else this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
 				break;
 			case require_data_grid_options.DataGridCellTypes.rowHeader:
-			case require_data_grid_options.DataGridCellTypes.default:
-				if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
-				else this.customCellView = defaultCellContentsTemplate.render(this, this);
-				break;
+			case require_data_grid_options.DataGridCellTypes.default: if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+			else this.customCellView = defaultCellContentsTemplate.render(this, this);
 		}
 		if (!this.columnDefinition?.sortable) this.sortDirection = void 0;
 		else if (this.columnDefinition.sortDirection) this.sortDirection = this.columnDefinition.sortDirection;
@@ -1844,7 +1833,7 @@ var DataGridRowTemplate = (context) => {
 	})}
 		>
 			<div
-				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", !!x.selected], [`connotation-${x.connotation}`, Boolean(x.connotation)])}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${require_data_grid_options.dataGridConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", !!x.selected])}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
 				<slot ${(0, _microsoft_fast_element.slotted)("slottedCellElements")}></slot>
@@ -1868,7 +1857,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}>
@@ -1918,7 +1907,7 @@ var DataGridCellTemplate = (context) => {
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
 			<div
-				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)], [`connotation-${x.connotation}`, Boolean(x.connotation)])}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${require_data_grid_options.dataGridConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)])}"
 			>
 				<div
 					class="content"