@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/definition30.cjs

@@ -2,74 +2,558 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition$1 = require("./definition29.cjs");
+const require_affix = require("./affix.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
+const require_definition$1 = require("./definition7.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition$2 = require("./definition10.cjs");
+const require_mixins = require("./mixins.cjs");
+const require_text_field = require("./text-field.cjs");
+const require_definition$3 = require("./definition29.cjs");
+const require_listbox = require("./listbox.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/contextual-help/contextual-help.ts
+//#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;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}";
+//#endregion
+//#region src/lib/combobox/combobox.options.ts
+/**
+* Autocomplete values for combobox.
+* @public
+*/
+var ComboboxAutocomplete = {
+	inline: "inline",
+	list: "list",
+	both: "both",
+	none: "none"
+};
+//#endregion
+//#region src/lib/combobox/combobox.ts
 /**
 * @public
-* @component contextual-help
+* @component combobox
 * @slot - Default slot.
-* @slot icon - Custom icon slot (optional).
+* @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 ContextualHelp = class extends require_vivid_element.VividElement {
+var Combobox = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_affix.AffixIcon(require_form_associated.FormAssociated(require_listbox.Listbox))))))) {
 	constructor(..._args) {
 		super(..._args);
-		this.placement = "right";
+		this.filteredOptions = [];
+		this.filter = "";
+		this._isNavigatingWithKeyboard = false;
+		this.fixedDropdown = false;
+		this.listboxId = (0, _microsoft_fast_web_utilities.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.
+	*
+	* @public
+	* @remarks
+	* Overrides `Listbox.options`.
+	*/
+	get options() {
+		_microsoft_fast_element.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());
+			this.selectedIndex = this.options[this.selectedIndex]?.text !== this.options[selectedIndex]?.text ? 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.
+	*
+	* @public
+	*/
+	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);
+		});
+	}
+	/**
+	* Focus the control and scroll the first selected option into view.
+	*
+	* @internal
+	* @remarks
+	* Overrides: `Listbox.focusAndScrollOptionIntoView`
+	*/
+	focusAndScrollOptionIntoView() {
+		if (this.contains(document.activeElement)) {
+			this.control.focus();
+			this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+		}
+	}
+	/**
+	* @internal
+	*/
+	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();
+				break;
+			case "Escape":
+				/* v8 ignore else -- @preserve */
+				if (!this.isAutocompleteInline) this.selectedIndex = -1;
+				if (this.open) {
+					this.open = false;
+					break;
+				}
+				this.value = "";
+				this.control.value = "";
+				this.filter = "";
+				this.filterOptions();
+				break;
+			case "Tab":
+				this.setInputToSelection();
+				if (!this.open) return true;
+				e.preventDefault();
+				this.open = false;
+				break;
+			case "ArrowUp":
+			case "ArrowDown":
+				this.filterOptions();
+				if (!this.open) {
+					this.open = true;
+					break;
+				}
+				/* v8 ignore else -- @preserve */
+				if (this.filteredOptions.length > 0) {
+					this._isNavigatingWithKeyboard = true;
+					super.keydownHandler(e);
+					this._isNavigatingWithKeyboard = false;
+				}
+				if (this.isAutocompleteInline) this.setInlineSelection();
+				break;
+			default: return true;
+		}
+	}
+	/**
+	* @internal
+	*/
+	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 = (0, _microsoft_fast_web_utilities.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
+	* @remarks
+	* Overrides `Listbox.selectPreviousOption`
+	*/
+	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
+	* @remarks
+	* Overrides: `Listbox.selectedOptionsChanged`
+	*/
+	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);
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "autocomplete",
+	mode: "fromView"
+})], Combobox.prototype, "autocomplete", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "shape", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Combobox.prototype, "scale", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], Combobox.prototype, "fixedDropdown", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Combobox.prototype, "metaSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Combobox.prototype, "maxHeight", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "open",
+	mode: "boolean"
+})], Combobox.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Combobox.prototype, "placeholder", void 0);
 //#endregion
-//#region src/lib/contextual-help/contextual-help.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
-/**
-* The template for the ContextualHelp component.
-*
-* @param context - element definition context
-* @public
-*/
-var ContextualHelpTemplate = (context) => {
-	const toggletipTag = context.tagFor(require_definition$1.Toggletip);
-	const iconTag = context.tagFor(require_definition.Icon);
+//#region src/lib/combobox/combobox.template.ts
+var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", disabled], [`shape-${shape}`, Boolean(shape)], [`size-${scale}`, Boolean(scale)], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], ["no-label", !label], ["has-icon", !!icon || Boolean(iconSlottedContent?.length)], ["has-meta", Boolean(metaSlottedContent?.length)], ["has-activedescendant", Boolean(_activeDescendant) && open], ["error", Boolean(errorValidationMessage)], ["success", !!successText]);
+function renderLabel() {
+	return _microsoft_fast_element.html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
+}
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+}
+function renderInput(context) {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
+	return _microsoft_fast_element.html` <div class="${getStateClasses}" ${(0, _microsoft_fast_element.ref)("_anchor")}>
+		<div
+			class="label-wrapper"
+			?hidden=${(x) => !x.label && !x._hasContextualHelp}
+		>
+			${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
+			<slot
+				name="contextual-help"
+				${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
+			></slot>
+		</div>
+		<div class="fieldset">
+			${(x) => affixIconTemplate(x.icon, require_affix.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)}"
+					${(0, _microsoft_fast_element.ref)("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
+				<div
+					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+				>
+					${chevronTemplate}
+				</div>
+			</div>
+		</div>
+	</div>`;
+}
+var comboboxTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition$2.Popup);
 	return _microsoft_fast_element.html`
-		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
-			<button class="${getClasses}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${iconTag} name="help-solid"></${iconTag}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${toggletipTag}>
+		<template
+			tabindex="${(x) => !x.disabled ? "0" : null}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.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 }) => {
+		x.open && require_dialog.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"}"
+					${(0, _microsoft_fast_element.ref)("_popup")}>
+					<div id="${(x) => x.listboxId}"
+						class="listbox"
+						role="listbox"
+						?disabled="${(x) => x.disabled}"
+						${(0, _microsoft_fast_element.ref)("listbox")}>
+						<slot ${(0, _microsoft_fast_element.slotted)({
+		filter: require_listbox.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/contextual-help/definition.ts
+//#region src/lib/combobox/definition.ts
 /**
 * @internal
 */
-var contextualHelpDefinition = require_vivid_element.defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [require_definition.iconDefinition, require_definition$1.toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
+var comboboxDefinition = require_vivid_element.defineVividComponent("combobox", Combobox, comboboxTemplate, [
+	require_definition.iconDefinition,
+	require_definition$2.popupDefinition,
+	require_definition$3.listboxOptionDefinition,
+	require_mixins.feedbackMessageDefinition
+], {
+	styles: [require_text_field.text_field_default, combobox_default],
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the contextual-help element with the design system.
+* Registers the combobox elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerContextualHelp = require_vivid_element.createRegisterFunction(contextualHelpDefinition);
+var registerCombobox = require_vivid_element.createRegisterFunction(comboboxDefinition);
 //#endregion
-Object.defineProperty(exports, "ContextualHelp", {
+Object.defineProperty(exports, "Combobox", {
 	enumerable: true,
 	get: function() {
-		return ContextualHelp;
+		return Combobox;
 	}
 });
-Object.defineProperty(exports, "contextualHelpDefinition", {
+Object.defineProperty(exports, "comboboxDefinition", {
 	enumerable: true,
 	get: function() {
-		return contextualHelpDefinition;
+		return comboboxDefinition;
 	}
 });
-Object.defineProperty(exports, "registerContextualHelp", {
+Object.defineProperty(exports, "registerCombobox", {
 	enumerable: true,
 	get: function() {
-		return registerContextualHelp;
+		return registerCombobox;
 	}
 });