@vonage/vivid 5.23.1 → 5.24.0

package/unbundled/definition31.js

@@ -1,58 +1,520 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { t as getFlagIconName } from "./utils.js";
-import { attr, html, when } from "@microsoft/fast-element";
-//#region src/lib/country/country.scss?inline
-var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { r as chevronTemplateFactory } from "./definition6.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { t as text_field_default } from "./text-field.js";
+import { i as isListboxOption, t as listboxOptionDefinition } from "./definition29.js";
+import { i as isOptgroup, t as optgroupDefinition } from "./definition30.js";
+import { 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}";
 //#endregion
-//#region src/lib/country/country.ts
+//#region src/lib/combobox/combobox.options.ts
+/** Autocomplete values for combobox. */
+var ComboboxAutocomplete = {
+	inline: "inline",
+	list: "list",
+	both: "both",
+	none: "none"
+};
+//#endregion
+//#region src/lib/combobox/combobox.ts
 /**
 * @public
-* @component country
-* @slot icon - Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
+* @component combobox
+* @slot - Default slot.
+* @slot icon - The preferred way to add an icon to the combobox control.
+* @slot meta - Slot to add meta content to the combobox control.
+* @slot helper-text - Describes how to use the combobox. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value updates
+* @vueModel modelValue value change `event.currentTarget.value`
+* @testAction fill comboboxFill
+* @testAction clear comboboxClear
+* @testAction selectOptionByText selectOptionByText
+* @testAction selectOptionByValue selectOptionByValue
+* @testRef control shadow input.control
 */
-var Country = class extends VividElement {
+var Combobox = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))))) {
+	constructor(..._args) {
+		super(..._args);
+		this.filteredOptions = [];
+		this.filter = "";
+		this._isNavigatingWithKeyboard = false;
+		this.fixedDropdown = false;
+		this.listboxId = uniqueId("listbox-");
+		this.maxHeight = 0;
+		this.open = false;
+		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 === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
+	}
+	get isAutocompleteList() {
+		return this.autocomplete === ComboboxAutocomplete.list || this.isAutocompleteBoth;
+	}
+	get isAutocompleteBoth() {
+		return this.autocomplete === ComboboxAutocomplete.both;
+	}
+	/** @internal */
+	openChanged() {
+		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+	}
+	/** A read-only list of options. */
+	get options() {
+		Observable.track(this, "options");
+		return this.filteredOptions.length ? this.filteredOptions : this._options;
+	}
+	set options(value) {
+		super.options = value;
+	}
+	/**
+	* Updates the placeholder on the proxy element.
+	* @internal
+	*/
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	}
+	/** @internal */
+	valueChanged(prev, next) {
+		if (this.$fastController.isConnected && this.options) {
+			const selectedIndex = this.options.findIndex((el) => el.text.toLowerCase() === next.toLowerCase());
+			const prevSelectedValue = this.options[this.selectedIndex]?.text;
+			const nextSelectedValue = this.options[selectedIndex]?.text;
+			this.selectedIndex = prevSelectedValue !== nextSelectedValue ? selectedIndex : this.selectedIndex;
+		}
+		super.valueChanged(prev, next);
+	}
+	/**
+	* Handle opening and closing the listbox when the combobox is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	clickHandler(e) {
+		if (this.disabled || this._isFromContextualHelp(e)) return;
+		if (this.open) {
+			const capturedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
+			if (!capturedOption || capturedOption.disabled) return;
+			this.selectedOptions = [capturedOption];
+			this.control.value = capturedOption.text;
+			this.clearSelectionRange();
+			this.updateValue(true);
+		}
+		this.open = !this.open;
+		if (this.open) this.control.focus();
+		return true;
+	}
+	/**
+	* Handle closing the listbox when the combobox is open and the chevron icon is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	_chevronIconClickHandler(e) {
+		if (!this.open) return;
+		e.stopPropagation();
+		this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.value) this.initialValue = this.value;
+		this._popup.anchor = this._anchor;
+	}
+	/** Filter available options by text value. */
+	filterOptions() {
+		if (!this.autocomplete || this.autocomplete === ComboboxAutocomplete.none) this.filter = "";
+		this.filteredOptions = this._options.filter((o) => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
+		if (this.isAutocompleteList) {
+			this._options.forEach((o) => {
+				o.hidden = !this.filteredOptions.includes(o);
+			});
+			for (const el of Array.from(this.children)) if (isOptgroup(el)) {
+				const hasVisibleOption = Array.from(el.children).some((child) => isListboxOption(child) && !child.hidden);
+				el.style.display = hasVisibleOption ? "" : "none";
+			}
+		}
+	}
+	/**
+	* Focus the control and scroll the first selected option into view.
+	*
+	* @internal
+	*/
+	focusAndScrollOptionIntoView() {
+		if (this.contains(document.activeElement)) {
+			this.control.focus();
+			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+		}
+	}
 	/** @internal */
-	get flagIconName() {
-		return getFlagIconName(this.code);
+	enqueueScrollSelectedOptionIntoViewIfNeeded() {
+		const firstSelectedOption = this.firstSelectedOption;
+		/* v8 ignore else -- @preserve */
+		if (firstSelectedOption) requestAnimationFrame(() => {
+			firstSelectedOption.scrollIntoView({ block: "nearest" });
+		});
+	}
+	/**
+	* Handle focus state when the element or its children lose focus.
+	*
+	* @param e - The focus event
+	* @internal
+	*/
+	focusoutHandler(e) {
+		this.syncValue();
+		if (!this.open) return true;
+		const focusTarget = e.relatedTarget;
+		if (this.isSameNode(focusTarget)) {
+			this.focus();
+			return;
+		}
+		this.open = false;
+	}
+	/**
+	* Handle content changes on the control input.
+	*
+	* @param e - the input event
+	* @internal
+	*/
+	inputHandler(e) {
+		this.filter = this.control.value;
+		this.filterOptions();
+		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;
+	}
+	/**
+	* Handle keydown actions for listbox navigation.
+	*
+	* @param e - the keyboard event
+	* @internal
+	*/
+	keydownHandler(e) {
+		const key = e.key;
+		if (e.ctrlKey || e.shiftKey) return true;
+		switch (key) {
+			case "Enter":
+				this.syncValue();
+				/* v8 ignore else -- @preserve */
+				if (this.isAutocompleteInline) this.filter = this.value;
+				this.open = false;
+				this.clearSelectionRange();
+				return;
+			case "Escape":
+				/* v8 ignore else -- @preserve */
+				if (!this.isAutocompleteInline) this.selectedIndex = -1;
+				if (this.open) {
+					this.open = false;
+					return;
+				}
+				this.value = "";
+				this.control.value = "";
+				this.filter = "";
+				this.filterOptions();
+				return;
+			case "Tab":
+				this.setInputToSelection();
+				if (!this.open) return true;
+				e.preventDefault();
+				this.open = false;
+				return;
+			case "ArrowUp":
+			case "ArrowDown":
+				this.filterOptions();
+				if (!this.open) {
+					this.open = true;
+					return;
+				}
+				/* v8 ignore else -- @preserve */
+				if (this.filteredOptions.length > 0) {
+					this._isNavigatingWithKeyboard = true;
+					super.keydownHandler(e);
+					this._isNavigatingWithKeyboard = false;
+				}
+				if (this.isAutocompleteInline) this.setInlineSelection();
+				return;
+			default: return true;
+		}
 	}
 	/** @internal */
-	get displayText() {
-		const customLabel = this.label?.trim();
-		if (customLabel) return customLabel;
-		const codeValue = this.code?.trim();
-		return codeValue ? codeValue.toUpperCase() : void 0;
+	setSelectedOptions() {
+		super.setSelectedOptions();
+		if (!this._isNavigatingWithKeyboard) this._activeDescendant = "";
+	}
+	/**
+	* 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(prev, next) {
+		if (this.$fastController.isConnected) {
+			next = limit(-1, this.options.length - 1, next);
+			if (next !== this.selectedIndex) {
+				this.selectedIndex = next;
+				return;
+			}
+			super.selectedIndexChanged(prev, next);
+		}
+	}
+	/**
+	* Move focus to the previous selectable option.
+	*
+	* @internal
+	*/
+	selectPreviousOption() {
+		if (!this.disabled && this.selectedIndex >= 0) this.selectedIndex = this.selectedIndex - 1;
+	}
+	_isDefaultSelected(option) {
+		return super._isDefaultSelected(option) || option.text !== "" && option.text === this.initialValue;
+	}
+	/**
+	* Focus and set the content of the control based on the first selected option.
+	*
+	* @internal
+	*/
+	setInputToSelection() {
+		if (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() {
+		/* v8 ignore else -- @preserve */
+		if (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 newValue = this.firstSelectedOption?.text ?? this.control.value;
+		this.updateValue(this.value !== newValue);
+	}
+	/**
+	* 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
+	*/
+	selectedOptionsChanged(_prev, next) {
+		if (this.$fastController.isConnected) this._options.forEach((o) => {
+			o.selected = next.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(prev, next) {
+		super.slottedOptionsChanged(prev, next);
+		this.updateValue();
+		const scale = this.getAttribute("scale") || this.scale;
+		next.forEach((element) => {
+			if (scale) {
+				element.setAttribute("scale", scale);
+				element.scale = scale;
+			}
+		});
+	}
+	/**
+	* Sets the value and to match the first selected option.
+	*
+	* @param shouldEmit - if true, the change event will be emitted
+	*
+	* @internal
+	*/
+	updateValue(shouldEmit) {
+		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.text || this.control.value;
+		if (shouldEmit) this.$emit("change");
+	}
+	/** @internal */
+	clearSelectionRange() {
+		const controlValueLength = this.control.value.length;
+		this.control.setSelectionRange(controlValueLength, controlValueLength);
 	}
 };
-__decorate([attr], Country.prototype, "code", void 0);
-__decorate([attr], Country.prototype, "label", void 0);
+__decorate([attr({
+	attribute: "autocomplete",
+	mode: "fromView"
+})], Combobox.prototype, "autocomplete", void 0);
+__decorate([attr], Combobox.prototype, "appearance", void 0);
+__decorate([attr], Combobox.prototype, "shape", void 0);
+__decorate([attr()], Combobox.prototype, "scale", void 0);
+__decorate([attr], Combobox.prototype, "placement", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], Combobox.prototype, "fixedDropdown", void 0);
+__decorate([observable], Combobox.prototype, "metaSlottedContent", void 0);
+__decorate([observable], Combobox.prototype, "maxHeight", void 0);
+__decorate([attr({
+	attribute: "open",
+	mode: "boolean"
+})], Combobox.prototype, "open", void 0);
+__decorate([attr], Combobox.prototype, "placeholder", void 0);
 //#endregion
-//#region src/lib/country/country.template.ts
-var CountryTemplate = (context) => {
-	const iconTag = context.tagFor(Icon);
-	return html`
-		<div class="base">
-			<slot name="icon" class="icon">
-				${when((x) => x.flagIconName, html`<${iconTag}
-						size="-4"
-						name="${(x) => x.flagIconName}"
-						aria-hidden="true"
-					></${iconTag}>`)}
-			</slot>
-			${when((x) => x.displayText, html`<span class="text">${(x) => x.displayText}</span>`)}
+//#region src/lib/combobox/combobox.template.ts
+function renderLabel() {
+	return html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
+}
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+}
+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])}"
+		${ref("_anchor")}
+	>
+		<div
+			class="label-wrapper"
+			?hidden=${(x) => !x.label && !x._hasContextualHelp}
+		>
+			${when((x) => x.label, renderLabel())}
+			<slot
+				name="contextual-help"
+				${slotted("_contextualHelpSlottedContent")}
+			></slot>
 		</div>
+		<div class="fieldset">
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
+					aria-autocomplete="${(x) => x.autocomplete}"
+					aria-controls="${(x) => x.listboxId}"
+					aria-expanded="${(x) => x.open}"
+					aria-haspopup="listbox"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					placeholder="${(x) => x.placeholder}"
+					role="combobox"
+					type="text"
+					?disabled="${(x) => x.disabled}"
+					:value="${(x) => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					${ref("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
+				<div
+					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+				>
+					${chevronTemplate}
+				</div>
+			</div>
+		</div>
+	</div>`;
+}
+var comboboxTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html`
+		<template
+			tabindex="${(x) => !x.disabled ? "0" : null}"
+			class="${(x) => classNames(["has-activedescendant", Boolean(x._activeDescendant) && x.open])}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+			@focusout="${(x, c) => x.focusoutHandler(c.event)}"
+			@keydown="${(x, { event }) => {
+		if (x.open) handleEscapeKeyAndStopPropogation(event);
+		return x.keydownHandler(event);
+	}}"
+		>
+			<div class="control-wrapper">
+				${() => renderInput(context)}
+				<${popupTag} class="popup"
+					style="${setFixedDropdownVarWidth}"
+					?open="${(x) => x.open}"
+					placement="${(x) => x.placement ?? "bottom-start"}"
+					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
+					${ref("_popup")}>
+					<div id="${(x) => x.listboxId}"
+						class="listbox"
+						role="listbox"
+						?disabled="${(x) => x.disabled}"
+						${ref("listbox")}>
+						<slot ${slotted({
+		filter: Listbox.slottedOptionFilter,
+		flatten: true,
+		property: "slottedOptions"
+	})}>
+						</slot>
+					</div>
+				</${popupTag}>
+			</div>
+			<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
+				${(x) => x._getFeedbackTemplate(context)}
+			</div>
+    </template>
 	`;
 };
 //#endregion
-//#region src/lib/country/definition.ts
+//#region src/lib/combobox/definition.ts
 /** @internal */
-var countryDefinition = defineVividComponent("country", Country, CountryTemplate, [iconDefinition], { styles: country_default });
+var comboboxDefinition = defineVividComponent("combobox", Combobox, comboboxTemplate, [
+	iconDefinition,
+	popupDefinition,
+	listboxOptionDefinition,
+	optgroupDefinition,
+	feedbackMessageDefinition
+], {
+	styles: [text_field_default, combobox_default],
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the country element with the design system.
+* Registers the combobox elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCountry = createRegisterFunction(countryDefinition);
+var registerCombobox = createRegisterFunction(comboboxDefinition);
 //#endregion
-export { registerCountry as n, Country as r, countryDefinition as t };
+export { registerCombobox as n, Combobox as r, comboboxDefinition as t };