@vonage/vivid 5.15.1 → 5.17.0

package/combobox/index.js

@@ -1,505 +1,305 @@
-import { i as y } from "../bundled/definition2.js";
-import { P as k, p as I } from "../bundled/definition9.js";
-import { l as $ } from "../bundled/definition12.js";
-import { s as C } from "../bundled/text-field.js";
-import { O as S, a as l, o as v, h as u, c as O, d as A } from "../bundled/vivid-element.js";
-import { W as V, f as H } from "../bundled/mixins.js";
-import { L as b } from "../bundled/listbox.js";
-import { F as D } from "../bundled/form-associated.js";
-import { W as T } from "../bundled/with-contextual-help.js";
-import { W as F } from "../bundled/with-error-text.js";
-import { W as B } from "../bundled/with-success-text.js";
-import { F as L } from "../bundled/form-element.js";
-import { b as E, a as W, I as R } from "../bundled/affix.js";
-import { u as P } from "../bundled/strings.js";
-import { l as z } from "../bundled/numbers.js";
-import { h as q } from "../bundled/index.js";
-import { c as N } from "../bundled/definition3.js";
-import { r as d } from "../bundled/ref.js";
-import { s as h } from "../bundled/slotted.js";
-import { w as K } from "../bundled/when.js";
-import { c as M } from "../bundled/class-names.js";
-const j = '.label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_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-300);--_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-300);--_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]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;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}', p = {
-  inline: "inline",
-  list: "list",
-  both: "both",
-  none: "none"
+import { T as e, d as t, l as n, o as r, s as i, w as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/ref.js";
+import { t as s } from "../bundled/when.js";
+import { t as c } from "../bundled/slotted.js";
+import { t as l } from "../bundled/definition2.js";
+import { t as u } from "../bundled/decorate.js";
+import { a as d, i as f, t as p } from "../bundled/affix.js";
+import { t as m } from "../bundled/form-element.js";
+import { t as h } from "../bundled/with-success-text.js";
+import { t as g } from "../bundled/with-error-text.js";
+import { t as _ } from "../bundled/with-contextual-help.js";
+import { t as v } from "../bundled/listbox.js";
+import { t as y } from "../bundled/class-names.js";
+import { n as b } from "../bundled/numbers.js";
+import { t as x } from "../bundled/strings.js";
+import { n as S } from "../bundled/form-associated.js";
+import { r as C } from "../bundled/definition6.js";
+import { i as w, t as T } from "../bundled/definition8.js";
+import { t as E } from "../bundled/dialog.js";
+import { a as D, t as O } from "../bundled/mixins.js";
+import { t as k } from "../bundled/text-field.js";
+import { t as A } from "../bundled/definition17.js";
+//#region src/lib/combobox/combobox.scss?inline
+var j = ".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;transition:transform .2s;display:flex;transform:rotate(0)}: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-300);--_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-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px}:host(.has-activedescendant) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}", M = {
+	inline: "inline",
+	list: "list",
+	both: "both",
+	none: "none"
+}, N = class extends _(O(g(h(m(p(S(v))))))) {
+	constructor(...e) {
+		super(...e), this.filteredOptions = [], this.filter = "", this._isNavigatingWithKeyboard = !1, this.fixedDropdown = !1, this.listboxId = x("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+	}
+	formResetCallback() {
+		super.formResetCallback(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1, this.value = this.firstSelectedOption?.text || "";
+	}
+	validate() {
+		super.validate(this.control);
+	}
+	get isAutocompleteInline() {
+		return this.autocomplete === M.inline || this.isAutocompleteBoth;
+	}
+	get isAutocompleteList() {
+		return this.autocomplete === M.list || this.isAutocompleteBoth;
+	}
+	get isAutocompleteBoth() {
+		return this.autocomplete === M.both;
+	}
+	openChanged() {
+		this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+	}
+	get options() {
+		return a.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+	}
+	set options(e) {
+		super.options = e;
+	}
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
+	}
+	valueChanged(e, t) {
+		if (this.$fastController.isConnected && this.options) {
+			let e = this.options.findIndex((e) => e.text.toLowerCase() === t.toLowerCase());
+			this.selectedIndex = this.options[this.selectedIndex]?.text === this.options[e]?.text ? this.selectedIndex : e;
+		}
+		super.valueChanged(e, t);
+	}
+	clickHandler(e) {
+		if (!(this.disabled || this._isFromContextualHelp(e))) {
+			if (this.open) {
+				let t = e.target.closest("option,[role=option],[data-vvd-component=option]");
+				if (!t || t.disabled) return;
+				this.selectedOptions = [t], this.control.value = t.text, this.clearSelectionRange(), this.updateValue(!0);
+			}
+			return this.open = !this.open, this.open && this.control.focus(), !0;
+		}
+	}
+	_chevronIconClickHandler(e) {
+		this.open &&= (e.stopPropagation(), !1);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.value && (this.initialValue = this.value), this._popup.anchor = this._anchor;
+	}
+	filterOptions() {
+		(!this.autocomplete || this.autocomplete === M.none) && (this.filter = ""), this.filteredOptions = this._options.filter((e) => e.text.toLowerCase().startsWith(this.filter.toLowerCase())), this.isAutocompleteList && this._options.forEach((e) => {
+			e.hidden = !this.filteredOptions.includes(e);
+		});
+	}
+	focusAndScrollOptionIntoView() {
+		this.contains(document.activeElement) && (this.control.focus(), this.enqueueScrollSelectedOptionIntoViewIfNeeded());
+	}
+	enqueueScrollSelectedOptionIntoViewIfNeeded() {
+		let e = this.firstSelectedOption;
+		/* v8 ignore else -- @preserve */
+		e && requestAnimationFrame(() => {
+			e.scrollIntoView({ block: "nearest" });
+		});
+	}
+	focusoutHandler(e) {
+		if (this.syncValue(), !this.open) return !0;
+		let t = e.relatedTarget;
+		if (this.isSameNode(t)) {
+			this.focus();
+			return;
+		}
+		this.open = !1;
+	}
+	inputHandler(e) {
+		if (this.filter = this.control.value, this.filterOptions(), this.isAutocompleteInline || (this.selectedIndex = this.options.map((e) => e.text).indexOf(this.control.value)), e.inputType.includes("deleteContent") || !this.filter.length) return !0;
+		this.isAutocompleteList && !this.open && (this.open = !0), this.isAutocompleteInline && (this.filteredOptions.length ? (this.selectedOptions = [this.filteredOptions[0]], this.selectedIndex = this.options.indexOf(this.firstSelectedOption), this.setInlineSelection()) : this.selectedIndex = -1);
+	}
+	keydownHandler(e) {
+		let t = e.key;
+		if (e.ctrlKey || e.shiftKey) return !0;
+		switch (t) {
+			case "Enter":
+				this.syncValue(), this.isAutocompleteInline && (this.filter = this.value), this.open = !1, this.clearSelectionRange();
+				break;
+			case "Escape":
+				if (this.isAutocompleteInline || (this.selectedIndex = -1), this.open) {
+					this.open = !1;
+					break;
+				}
+				this.value = "", this.control.value = "", this.filter = "", this.filterOptions();
+				break;
+			case "Tab":
+				if (this.setInputToSelection(), !this.open) return !0;
+				e.preventDefault(), this.open = !1;
+				break;
+			case "ArrowUp":
+			case "ArrowDown":
+				if (this.filterOptions(), !this.open) {
+					this.open = !0;
+					break;
+				}
+				this.filteredOptions.length > 0 && (this._isNavigatingWithKeyboard = !0, super.keydownHandler(e), this._isNavigatingWithKeyboard = !1), this.isAutocompleteInline && this.setInlineSelection();
+				break;
+			default: return !0;
+		}
+	}
+	setSelectedOptions() {
+		super.setSelectedOptions(), this._isNavigatingWithKeyboard || (this._activeDescendant = "");
+	}
+	selectedIndexChanged(e, t) {
+		if (this.$fastController.isConnected) {
+			if (t = b(-1, this.options.length - 1, t), t !== this.selectedIndex) {
+				this.selectedIndex = t;
+				return;
+			}
+			super.selectedIndexChanged(e, t);
+		}
+	}
+	selectPreviousOption() {
+		!this.disabled && this.selectedIndex >= 0 && --this.selectedIndex;
+	}
+	_isDefaultSelected(e) {
+		return super._isDefaultSelected(e) || e.text !== "" && e.text === this.initialValue;
+	}
+	setInputToSelection() {
+		this.firstSelectedOption && (this.control.value = this.firstSelectedOption.text, this.control.focus());
+	}
+	setInlineSelection() {
+		/* v8 ignore else -- @preserve */
+		this.firstSelectedOption && (this.setInputToSelection(), this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward"));
+	}
+	syncValue() {
+		let e = this.firstSelectedOption?.text ?? this.control.value;
+		this.updateValue(this.value !== e);
+	}
+	selectedOptionsChanged(e, t) {
+		this.$fastController.isConnected && this._options.forEach((e) => {
+			e.selected = t.includes(e);
+		});
+	}
+	slottedOptionsChanged(e, t) {
+		super.slottedOptionsChanged(e, t), this.updateValue();
+		let n = this.getAttribute("scale") || this.scale;
+		t.forEach((e) => {
+			n && (e.setAttribute("scale", n), e.scale = n);
+		});
+	}
+	updateValue(e) {
+		this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value), e && this.$emit("change");
+	}
+	clearSelectionRange() {
+		let e = this.control.value.length;
+		this.control.setSelectionRange(e, e);
+	}
 };
-var U = Object.defineProperty, n = (a, t, e, o) => {
-  for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
-    (c = a[s]) && (r = c(t, e, r) || r);
-  return r && U(t, e, r), r;
-};
-class i extends T(
-  V(
-    F(
-      B(L(E(D(b))))
-    )
-  )
-) {
-  constructor() {
-    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    super.formResetCallback(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1, this.value = this.firstSelectedOption?.text || "";
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  get isAutocompleteInline() {
-    return this.autocomplete === p.inline || this.isAutocompleteBoth;
-  }
-  get isAutocompleteList() {
-    return this.autocomplete === p.list || this.isAutocompleteBoth;
-  }
-  get isAutocompleteBoth() {
-    return this.autocomplete === p.both;
-  }
-  /**
-   * @internal
-   */
-  openChanged() {
-    this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
-  }
-  /**
-   * The list of options.
-   *
-   * @public
-   * @remarks
-   * Overrides `Listbox.options`.
-   */
-  get options() {
-    return S.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
-  }
-  set options(t) {
-    super.options = t;
-  }
-  /**
-   * Updates the placeholder on the proxy element.
-   * @internal
-   */
-  placeholderChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
-  }
-  /**
-   * @internal
-   */
-  valueChanged(t, e) {
-    if (this.$fastController.isConnected && this.options) {
-      const o = this.options.findIndex(
-        (c) => c.text.toLowerCase() === e.toLowerCase()
-      ), r = this.options[this.selectedIndex]?.text, s = this.options[o]?.text;
-      this.selectedIndex = r !== s ? o : this.selectedIndex;
-    }
-    super.valueChanged(t, e);
-  }
-  /**
-   * Handle opening and closing the listbox when the combobox is clicked.
-   *
-   * @param e - the mouse event
-   * @internal
-   */
-  clickHandler(t) {
-    if (!(this.disabled || this._isFromContextualHelp(t))) {
-      if (this.open) {
-        const e = t.target.closest(
-          "option,[role=option],[data-vvd-component=option]"
-        );
-        if (!e || e.disabled)
-          return;
-        this.selectedOptions = [e], this.control.value = e.text, this.clearSelectionRange(), this.updateValue(!0);
-      }
-      return this.open = !this.open, this.open && this.control.focus(), !0;
-    }
-  }
-  /**
-   * Handle closing the listbox when the combobox is open and the chevron icon is clicked.
-   *
-   * @param e - the mouse event
-   * @internal
-   */
-  _chevronIconClickHandler(t) {
-    this.open && (t.stopPropagation(), this.open = !1);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.value && (this.initialValue = this.value), this._popup.anchor = this._anchor;
-  }
-  /**
-   * Filter available options by text value.
-   *
-   * @public
-   */
-  filterOptions() {
-    (!this.autocomplete || this.autocomplete === p.none) && (this.filter = ""), this.filteredOptions = this._options.filter(
-      (t) => t.text.toLowerCase().startsWith(this.filter.toLowerCase())
-    ), this.isAutocompleteList && this._options.forEach((t) => {
-      t.hidden = !this.filteredOptions.includes(t);
-    });
-  }
-  /**
-   * Focus the control and scroll the first selected option into view.
-   *
-   * @internal
-   * @remarks
-   * Overrides: `Listbox.focusAndScrollOptionIntoView`
-   */
-  focusAndScrollOptionIntoView() {
-    this.contains(document.activeElement) && (this.control.focus(), this.enqueueScrollSelectedOptionIntoViewIfNeeded());
-  }
-  /**
-   * @internal
-   */
-  enqueueScrollSelectedOptionIntoViewIfNeeded() {
-    const t = this.firstSelectedOption;
-    t && requestAnimationFrame(() => {
-      t.scrollIntoView({ block: "nearest" });
-    });
-  }
-  /**
-   * Handle focus state when the element or its children lose focus.
-   *
-   * @param e - The focus event
-   * @internal
-   */
-  focusoutHandler(t) {
-    if (this.syncValue(), !this.open)
-      return !0;
-    const e = t.relatedTarget;
-    if (this.isSameNode(e)) {
-      this.focus();
-      return;
-    }
-    this.open = !1;
-  }
-  /**
-   * Handle content changes on the control input.
-   *
-   * @param e - the input event
-   * @internal
-   */
-  inputHandler(t) {
-    if (this.filter = this.control.value, this.filterOptions(), this.isAutocompleteInline || (this.selectedIndex = this.options.map((e) => e.text).indexOf(this.control.value)), t.inputType.includes("deleteContent") || !this.filter.length)
-      return !0;
-    this.isAutocompleteList && !this.open && (this.open = !0), this.isAutocompleteInline && (this.filteredOptions.length ? (this.selectedOptions = [this.filteredOptions[0]], this.selectedIndex = this.options.indexOf(this.firstSelectedOption), this.setInlineSelection()) : this.selectedIndex = -1);
-  }
-  /**
-   * Handle keydown actions for listbox navigation.
-   *
-   * @param e - the keyboard event
-   * @internal
-   */
-  keydownHandler(t) {
-    const e = t.key;
-    if (t.ctrlKey || t.shiftKey)
-      return !0;
-    switch (e) {
-      case "Enter": {
-        this.syncValue(), this.isAutocompleteInline && (this.filter = this.value), this.open = !1, this.clearSelectionRange();
-        break;
-      }
-      case "Escape": {
-        if (this.isAutocompleteInline || (this.selectedIndex = -1), this.open) {
-          this.open = !1;
-          break;
-        }
-        this.value = "", this.control.value = "", this.filter = "", this.filterOptions();
-        break;
-      }
-      case "Tab": {
-        if (this.setInputToSelection(), !this.open)
-          return !0;
-        t.preventDefault(), this.open = !1;
-        break;
-      }
-      case "ArrowUp":
-      case "ArrowDown": {
-        if (this.filterOptions(), !this.open) {
-          this.open = !0;
-          break;
-        }
-        this.filteredOptions.length > 0 && super.keydownHandler(t), this.isAutocompleteInline && this.setInlineSelection();
-        break;
-      }
-      default:
-        return !0;
-    }
-  }
-  /**
-   * Ensure that the selectedIndex is within the current allowable filtered range.
-   *
-   * @param prev - the previous selected index value
-   * @param next - the current selected index value
-   *
-   * @internal
-   */
-  selectedIndexChanged(t, e) {
-    if (this.$fastController.isConnected) {
-      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
-        this.selectedIndex = e;
-        return;
-      }
-      super.selectedIndexChanged(t, e);
-    }
-  }
-  /**
-   * Move focus to the previous selectable option.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.selectPreviousOption`
-   */
-  selectPreviousOption() {
-    !this.disabled && this.selectedIndex >= 0 && (this.selectedIndex = this.selectedIndex - 1);
-  }
-  _isDefaultSelected(t) {
-    return super._isDefaultSelected(t) || t.text !== "" && t.text === this.initialValue;
-  }
-  /**
-   * Focus and set the content of the control based on the first selected option.
-   *
-   * @internal
-   */
-  setInputToSelection() {
-    this.firstSelectedOption && (this.control.value = this.firstSelectedOption.text, this.control.focus());
-  }
-  /**
-   * Focus, set and select the content of the control based on the first selected option.
-   *
-   * @internal
-   */
-  setInlineSelection() {
-    this.firstSelectedOption && (this.setInputToSelection(), this.control.setSelectionRange(
-      this.filter.length,
-      this.control.value.length,
-      "backward"
-    ));
-  }
-  /**
-   * Determines if a value update should involve emitting a change event, then updates the value.
-   *
-   * @internal
-   */
-  syncValue() {
-    const t = this.firstSelectedOption?.text ?? this.control.value;
-    this.updateValue(this.value !== t);
-  }
-  /**
-   * Ensure that the entire list of options is used when setting the selected property.
-   *
-   * @param prev - the previous list of selected options
-   * @param next - the current list of selected options
-   *
-   * @internal
-   * @remarks
-   * Overrides: `Listbox.selectedOptionsChanged`
-   */
-  selectedOptionsChanged(t, e) {
-    this.$fastController.isConnected && this._options.forEach((o) => {
-      o.selected = e.includes(o);
-    });
-  }
-  /**
-   * Synchronize the form-associated proxy and update the value property of the element.
-   *
-   * @param prev - the previous collection of slotted option elements
-   * @param next - the next collection of slotted option elements
-   *
-   * @internal
-   */
-  slottedOptionsChanged(t, e) {
-    super.slottedOptionsChanged(t, e), this.updateValue();
-    const o = this.getAttribute("scale") || this.scale;
-    e.forEach((r) => {
-      o && (r.setAttribute("scale", o), r.scale = o);
-    });
-  }
-  /**
-   * Sets the value and to match the first selected option.
-   *
-   * @param shouldEmit - if true, the change event will be emitted
-   *
-   * @internal
-   */
-  updateValue(t) {
-    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value), t && this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  clearSelectionRange() {
-    const t = this.control.value.length;
-    this.control.setSelectionRange(t, t);
-  }
-}
-n([
-  l({ attribute: "autocomplete", mode: "fromView" })
-], i.prototype, "autocomplete");
-n([
-  l
-], i.prototype, "appearance");
-n([
-  l
-], i.prototype, "shape");
-n([
-  l()
-], i.prototype, "scale");
-n([
-  l
-], i.prototype, "placement");
-n([
-  l({ mode: "boolean", attribute: "fixed-dropdown" })
-], i.prototype, "fixedDropdown");
-n([
-  v
-], i.prototype, "metaSlottedContent");
-n([
-  v
-], i.prototype, "maxHeight");
-n([
-  l({ attribute: "open", mode: "boolean" })
-], i.prototype, "open");
-n([
-  l
-], i.prototype, "placeholder");
-const Y = ({
-  icon: a,
-  iconSlottedContent: t,
-  metaSlottedContent: e,
-  errorValidationMessage: o,
-  successText: r,
-  shape: s,
-  scale: c,
-  disabled: x,
-  placeholder: m,
-  label: _,
-  appearance: f,
-  open: g,
-  _activeDescendant: w
-}) => M(
-  "base",
-  ["disabled", x],
-  [`shape-${s}`, !!s],
-  [`size-${c}`, !!c],
-  ["placeholder", !!m],
-  [`appearance-${f}`, !!f],
-  ["no-label", !_],
-  ["has-icon", !!a || !!t?.length],
-  ["has-meta", !!e?.length],
-  ["has-activedescendant", !!w && g],
-  ["error", !!o],
-  ["success", !!r]
-);
-function G() {
-  return u` <label for="control" class="label">
-		${(a) => a.label}
+u([n({
+	attribute: "autocomplete",
+	mode: "fromView"
+})], N.prototype, "autocomplete", void 0), u([n], N.prototype, "appearance", void 0), u([n], N.prototype, "shape", void 0), u([n()], N.prototype, "scale", void 0), u([n], N.prototype, "placement", void 0), u([n({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], N.prototype, "fixedDropdown", void 0), u([e], N.prototype, "metaSlottedContent", void 0), u([e], N.prototype, "maxHeight", void 0), u([n({
+	attribute: "open",
+	mode: "boolean"
+})], N.prototype, "open", void 0), u([n], N.prototype, "placeholder", void 0);
+//#endregion
+//#region src/lib/combobox/combobox.template.ts
+var P = ({ icon: e, iconSlottedContent: t, metaSlottedContent: n, errorValidationMessage: r, successText: i, shape: a, scale: o, disabled: s, placeholder: c, label: l, appearance: u, open: d, _activeDescendant: f }) => y("base", ["disabled", s], [`shape-${a}`, !!a], [`size-${o}`, !!o], ["placeholder", !!c], [`appearance-${u}`, !!u], ["no-label", !l], ["has-icon", !!e || !!t?.length], ["has-meta", !!n?.length], ["has-activedescendant", !!f && d], ["error", !!r], ["success", !!i]);
+function F() {
+	return t` <label for="control" class="label">
+		${(e) => e.label}
 	</label>`;
 }
-function J(a) {
-  return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
-    a.getBoundingClientRect().width
-  )}px` : null;
+function I(e) {
+	return e.open && e.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
-function Q(a) {
-  const t = W(a), e = N(a);
-  return u` <div class="${Y}" ${d("_anchor")}>
+function L(e) {
+	let n = d(e), r = C(e);
+	return t` <div class="${P}" ${o("_anchor")}>
 		<div
 			class="label-wrapper"
-			?hidden=${(o) => !o.label && !o._hasContextualHelp}
+			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${K((o) => o.label, G())}
+			${s((e) => e.label, F())}
 			<slot
 				name="contextual-help"
-				${h("_contextualHelpSlottedContent")}
+				${c("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
-			${(o) => t(o.icon, R.Slot)}
+			${(e) => n(e.icon, f.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
 					autocomplete="off"
 					class="control"
-					aria-activedescendant="${(o) => o.open ? o._activeDescendant : null}"
-					aria-autocomplete="${(o) => o.autocomplete}"
-					aria-controls="${(o) => o.listboxId}"
-					aria-expanded="${(o) => o.open}"
+					aria-activedescendant="${(e) => e.open ? e._activeDescendant : null}"
+					aria-autocomplete="${(e) => e.autocomplete}"
+					aria-controls="${(e) => e.listboxId}"
+					aria-expanded="${(e) => e.open}"
 					aria-haspopup="listbox"
-					aria-describedby="${(o) => o._feedbackDescribedBy}"
-					placeholder="${(o) => o.placeholder}"
+					aria-describedby="${(e) => e._feedbackDescribedBy}"
+					placeholder="${(e) => e.placeholder}"
 					role="combobox"
 					type="text"
-					?disabled="${(o) => o.disabled}"
-					:value="${(o) => o.value}"
-					@input="${(o, r) => o.inputHandler(r.event)}"
-					${d("control")}
+					?disabled="${(e) => e.disabled}"
+					:value="${(e) => e.value}"
+					@input="${(e, t) => e.inputHandler(t.event)}"
+					${o("control")}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${h("metaSlottedContent")}></slot>
+				<slot name="meta" ${c("metaSlottedContent")}></slot>
 				<div
-					@click="${(o, r) => o._chevronIconClickHandler(r.event)}"
+					@click="${(e, t) => e._chevronIconClickHandler(t.event)}"
 				>
-					${e}
+					${r}
 				</div>
 			</div>
 		</div>
 	</div>`;
 }
-const X = (a) => {
-  const t = a.tagFor(k);
-  return u`
+//#endregion
+//#region src/lib/combobox/index.ts
+i(r("combobox", N, (e) => {
+	let n = e.tagFor(w);
+	return t`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
-			@click="${(e, o) => e.clickHandler(o.event)}"
-			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
-			@keydown="${(e, { event: o }) => (e.open && q(o), e.keydownHandler(o))}"
+			class="${(e) => y(["has-activedescendant", !!e._activeDescendant && e.open])}"
+			@click="${(e, t) => e.clickHandler(t.event)}"
+			@focusout="${(e, t) => e.focusoutHandler(t.event)}"
+			@keydown="${(e, { event: t }) => (e.open && E(t), e.keydownHandler(t))}"
 		>
 			<div class="control-wrapper">
-				${() => Q(a)}
-				<${t} class="popup"
-					style="${J}"
+				${() => L(e)}
+				<${n} class="popup"
+					style="${I}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
-					${d("_popup")}>
+					${o("_popup")}>
 					<div id="${(e) => e.listboxId}"
 						class="listbox"
 						role="listbox"
 						?disabled="${(e) => e.disabled}"
-						${d("listbox")}>
-						<slot ${h({
-    filter: b.slottedOptionFilter,
-    flatten: !0,
-    property: "slottedOptions"
-  })}>
+						${o("listbox")}>
+						<slot ${c({
+		filter: v.slottedOptionFilter,
+		flatten: !0,
+		property: "slottedOptions"
+	})}>
 						</slot>
 					</div>
-				</${t}>
+				</${n}>
 			</div>
-			<div class="feedback-wrapper" @click="${(e, o) => o.event.stopPropagation()}">
-				${(e) => e._getFeedbackTemplate(a)}
+			<div class="feedback-wrapper" @click="${(e, t) => t.event.stopPropagation()}">
+				${(t) => t._getFeedbackTemplate(e)}
 			</div>
     </template>
 	`;
-}, Z = A(
-  "combobox",
-  i,
-  X,
-  [
-    y,
-    I,
-    $,
-    H
-  ],
-  {
-    styles: [C, j],
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), ee = O(Z);
-ee();
+}, [
+	l,
+	T,
+	A,
+	D
+], {
+	styles: [k, j],
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion