@vonage/vivid 5.25.0 → 5.28.0

package/unbundled/definition26.cjs

@@ -1,16 +1,17 @@
-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_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_definition$1 = require("./definition22.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_randomId = require("./randomId.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_definition$2 = require("./definition25.cjs");
 const require_char_count = require("./char-count.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
@@ -18,6 +19,7 @@ const require_text_field = require("./text-field.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/text-field/text-field.ts
+var textFieldAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /** Text field sub-types */
 var TextFieldType = {
 	/** An email TextField */
@@ -229,7 +231,7 @@ var TextfieldTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`
 		<div
-			class="base ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+			class="base ${(x) => (0, _microsoft_fast_web_utilities.classNames)(`connotation-accent`, `appearance-${textFieldAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
 		>
 			${(0, _microsoft_fast_element.when)((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div
@@ -306,7 +308,7 @@ var TextfieldTemplate = (context) => {
 /** @internal */
 var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
 	require_definition.iconDefinition,
-	require_mixins.feedbackMessageDefinition,
+	require_feedback_message.feedbackMessageDefinition,
 	require_definition$1.visuallyHiddenDefinition,
 	require_definition$2.contextualHelpDefinition
 ], {

package/unbundled/definition26.js

@@ -2,14 +2,16 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
 import { n as visuallyHiddenDefinition } from "./definition22.js";
-import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } 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 { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
+import { n as WithLightDOMFeedback } from "./mixins.js";
 import { t as contextualHelpDefinition } from "./definition25.js";
 import { t as WithCharCount } from "./char-count.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
@@ -17,6 +19,7 @@ import { t as text_field_default } from "./text-field.js";
 import { ElementStyles, Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/text-field/text-field.ts
+var textFieldAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /** Text field sub-types */
 var TextFieldType = {
 	/** An email TextField */
@@ -228,7 +231,7 @@ var TextfieldTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`
 		<div
-			class="base ${(x) => classNames(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+			class="base ${(x) => classNames(`connotation-accent`, `appearance-${textFieldAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
 		>
 			${when((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div

package/unbundled/definition27.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_dialog = require("./dialog.cjs");
@@ -9,7 +8,7 @@ const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;display:flex}.control:not(.has-text) .text{display:none}.content{display:contents}.has-text .content{font:var(--vvd-typography-base)}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -117,12 +116,14 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 require_decorate.__decorate([_microsoft_fast_element.observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["has-text", x.text !== void 0], ["open", x.open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
+	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
 	return _microsoft_fast_element.html`
-${require_anchored.anchorSlotTemplateFactory()}
+${anchorSlotTemplate}
 ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span><span slot="_description-secondary" id="${(x) => x._descriptionSecondaryId}">${(x) => x.textSecondary}</span>`)}
-<${popupTag} class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open])}" arrow alternate
+<${popupTag} class="${(x) => getClasses(x)}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -135,12 +136,14 @@ ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_de
 		${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary"
 				><slot name="_description-secondary"></slot
 			></span>`)}
-		<slot
-			${(0, _microsoft_fast_element.slotted)({
+		<span class="content"
+			><slot
+				${(0, _microsoft_fast_element.slotted)({
 		property: "_defaultSlotContent",
 		filter: (0, _microsoft_fast_element.elements)()
 	})}
-		></slot>
+			></slot
+		></span>
 		<slot name="kbd-shortcut"
 			${(0, _microsoft_fast_element.slotted)({
 		property: "_kbdShortcutSlotted",

package/unbundled/definition27.js

@@ -8,7 +8,7 @@ import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
 import { DOM, attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;display:flex}.control:not(.has-text) .text{display:none}.content{display:contents}.has-text .content{font:var(--vvd-typography-base)}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -116,12 +116,14 @@ __decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 __decorate([observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
+var getClasses = (x) => classNames("control", ["has-text", x.text !== void 0], ["open", x.open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
+	const anchorSlotTemplate = anchorSlotTemplateFactory();
 	return html`
-${anchorSlotTemplateFactory()}
+${anchorSlotTemplate}
 ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span><span slot="_description-secondary" id="${(x) => x._descriptionSecondaryId}">${(x) => x.textSecondary}</span>`)}
-<${popupTag} class="${(x) => classNames("control", ["open", x.open])}" arrow alternate
+<${popupTag} class="${(x) => getClasses(x)}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -134,12 +136,14 @@ ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}
 		${when((x) => x.textSecondary, html`<span class="text-secondary"
 				><slot name="_description-secondary"></slot
 			></span>`)}
-		<slot
-			${slotted({
+		<span class="content"
+			><slot
+				${slotted({
 		property: "_defaultSlotContent",
 		filter: elements()
 	})}
-		></slot>
+			></slot
+		></span>
 		<slot name="kbd-shortcut"
 			${slotted({
 		property: "_kbdShortcutSlotted",

package/unbundled/definition28.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
@@ -7,9 +6,10 @@ const require_delegates_aria = require("./delegates-aria.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_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_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition27.cjs");
@@ -467,7 +467,7 @@ var colorPickerDefinition = require_vivid_element.defineVividComponent("color-pi
 	require_definition$3.textFieldDefinition,
 	require_definition$1.buttonDefinition,
 	require_definition$4.tooltipDefinition,
-	require_mixins.feedbackMessageDefinition
+	require_feedback_message.feedbackMessageDefinition
 ], { styles: color_picker_default });
 /**
 * Registers the color-picker element with the design system.

package/unbundled/definition28.js

@@ -6,9 +6,10 @@ import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { i as Button, t as buttonDefinition } 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 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 { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";

package/unbundled/definition29.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_icon = require("./icon.cjs");
@@ -32,7 +31,7 @@ var ListboxOptionTemplate = (context) => {
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div
-				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${require_option.optionConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-disabled", "with-active", "with-selected", "with-selectedAndHover", ["disabled", x.disabled], ["selected", x.selected], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
 			>
 				${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)} ${text()}
 				<slot name="trailing-meta"></slot>
@@ -44,7 +43,7 @@ var ListboxOptionTemplate = (context) => {
 //#endregion
 //#region src/lib/option/definition.ts
 /** @internal */
-var listboxOptionDefinition = require_vivid_element.defineVividComponent("option", require_option.ListboxOption, ListboxOptionTemplate, [require_definition.iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
+var listboxOptionDefinition = require_vivid_element.defineVividComponent("option", require_option.ListboxOption, ListboxOptionTemplate, [require_definition.iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
 /**
 * Registers the listbox-option elements with the design system.
 *

package/unbundled/definition29.js

@@ -3,7 +3,7 @@ import { t as iconDefinition } from "./definition.js";
 import { t as Icon } from "./icon.js";
 import { a as affixIconTemplateFactory, i as IconWrapper } from "./affix.js";
 import { n as applyHostSemantics } from "./host-semantics.js";
-import { t as ListboxOption } from "./option.js";
+import { r as optionConnotation, t as ListboxOption } from "./option.js";
 import { html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/option/option.template.ts
@@ -31,7 +31,7 @@ var ListboxOptionTemplate = (context) => {
 			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div
-				class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
+				class="${(x) => classNames("base", `connotation-${optionConnotation.parse(x.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-disabled", "with-active", "with-selected", "with-selectedAndHover", ["disabled", x.disabled], ["selected", x.selected], ["highlighted", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)])}"
 			>
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${text()}
 				<slot name="trailing-meta"></slot>
@@ -43,7 +43,7 @@ var ListboxOptionTemplate = (context) => {
 //#endregion
 //#region src/lib/option/definition.ts
 /** @internal */
-var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
+var listboxOptionDefinition = defineVividComponent("option", ListboxOption, ListboxOptionTemplate, [iconDefinition], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-shadow,0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor));outline:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" });
 /**
 * Registers the listbox-option elements with the design system.
 *

package/unbundled/definition3.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition2.cjs");
@@ -38,8 +37,10 @@ var Accordion = class extends require_vivid_element.VividElement {
 				if (item instanceof require_definition.AccordionItem) {
 					item.addEventListener("change", this.activeItemChange);
 					/* v8 ignore else -- @preserve */
-					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item.expanded = item === this.findExpandedItem();
+					if (this.isSingleExpandMode()) {
+						if (this.findExpandedItem() === null && index === 0) item.expanded = true;
+						else item.expanded = item === this.findExpandedItem();
+					}
 				}
 				const itemId = this.accordionIds[index];
 				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
@@ -85,9 +86,7 @@ var Accordion = class extends require_vivid_element.VividElement {
 				case _microsoft_fast_web_utilities.keyHome:
 					this.focusItem(0);
 					break;
-				case _microsoft_fast_web_utilities.keyEnd:
-					this.focusItem(this.accordionItems.length - 1);
-					break;
+				case _microsoft_fast_web_utilities.keyEnd: this.focusItem(this.accordionItems.length - 1);
 			}
 		};
 	}

package/unbundled/definition3.js

@@ -37,8 +37,10 @@ var Accordion = class extends VividElement {
 				if (item instanceof AccordionItem) {
 					item.addEventListener("change", this.activeItemChange);
 					/* v8 ignore else -- @preserve */
-					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item.expanded = item === this.findExpandedItem();
+					if (this.isSingleExpandMode()) {
+						if (this.findExpandedItem() === null && index === 0) item.expanded = true;
+						else item.expanded = item === this.findExpandedItem();
+					}
 				}
 				const itemId = this.accordionIds[index];
 				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
@@ -84,9 +86,7 @@ var Accordion = class extends VividElement {
 				case keyHome:
 					this.focusItem(0);
 					break;
-				case keyEnd:
-					this.focusItem(this.accordionItems.length - 1);
-					break;
+				case keyEnd: this.focusItem(this.accordionItems.length - 1);
 			}
 		};
 	}

package/unbundled/definition30.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 const require_optgroup = require("./optgroup.cjs");

package/unbundled/definition31.cjs

@@ -1,16 +1,17 @@
-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");
@@ -21,7 +22,7 @@ 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. */
@@ -33,6 +34,7 @@ var ComboboxAutocomplete = {
 };
 //#endregion
 //#region src/lib/combobox/combobox.ts
+var comboboxAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component combobox
@@ -206,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.
@@ -243,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();
@@ -413,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
@@ -508,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,14 +2,16 @@ 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 { n as isListboxOption } from "./option.js";
@@ -20,7 +22,7 @@ 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. */
@@ -32,6 +34,7 @@ var ComboboxAutocomplete = {
 };
 //#endregion
 //#region src/lib/combobox/combobox.ts
+var comboboxAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
 * @component combobox
@@ -205,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.
@@ -242,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();
@@ -412,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,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");

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");