@vonage/vivid 5.23.1 → 5.24.0

package/unbundled/definition30.cjs

@@ -1,530 +1,111 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_affix = require("./affix.cjs");
-const require_form_associated = require("./form-associated.cjs");
-const require_definition$1 = require("./definition6.cjs");
-const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition9.cjs");
-const require_mixins = require("./mixins.cjs");
-const require_form_element = require("./form-element.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_text_field = require("./text-field.cjs");
-const require_definition$3 = require("./definition29.cjs");
-const require_listbox = require("./listbox.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/combobox/combobox.scss?inline
-var combobox_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex;position:relative}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end:8px;--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);pointer-events:none;line-height:1;display:inline-block;position:absolute;inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px;display:flex;position:relative}.listbox{max-height:var(--combobox-height,408px);contain:paint;border-radius:8px;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width,100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}::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. */
-var ComboboxAutocomplete = {
-	inline: "inline",
-	list: "list",
-	both: "both",
-	none: "none"
-};
-//#endregion
-//#region src/lib/combobox/combobox.ts
+//#region src/lib/optgroup/optgroup.ts
+/**
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
+*/
+function isOptgroup(el) {
+	return el instanceof Optgroup;
+}
 /**
+* Groups options within Select, Searchable Select, or Combobox components
+*
 * @public
-* @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
+* @component optgroup
+* @slot - Default slot for options.
+* @slot label - Label for the option group.
 */
-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))))))) {
+var Optgroup = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		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;
+		this._computedLabelledBy = null;
 	}
 	/** @internal */
-	openChanged() {
-		if (this.open) this.enqueueScrollSelectedOptionIntoViewIfNeeded();
-	}
-	/** A read-only list of 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());
-			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);
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = (0, _microsoft_fast_web_utilities.uniqueId)("vvd-optgroup-label-");
+			ids.push(el.id);
 		}
-		this.open = !this.open;
-		if (this.open) this.control.focus();
-		return true;
+		this._computedLabelledBy = ids.join(" ");
 	}
 	/**
-	* Handle closing the listbox when the combobox is open and the chevron icon is clicked.
-	*
-	* @param e - the mouse event
+	* Handles changes to the default slot.
+	* Dispatches a bubbling, composed event so that parent components
+	* (Select, Combobox, Searchable Select) can re-process their options.
 	* @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);
-		});
-	}
-	/**
-	* Focus the control and scroll the first selected option into view.
-	*
-	* @internal
-	*/
-	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" });
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: true,
+			composed: true
 		});
 	}
-	/**
-	* 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 */
-	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
-	*/
-	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);
-	}
 };
-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);
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_computedLabelledBy", void 0);
 //#endregion
-//#region src/lib/combobox/combobox.template.ts
-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="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.disabled], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["no-label", !x.label], ["has-icon", !!x.icon || Boolean(x.iconSlottedContent?.length)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText])}"
-		${(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);
+//#region src/lib/optgroup/optgroup.template.ts
+var OptgroupTemplate = () => {
 	return _microsoft_fast_element.html`
 		<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 }) => {
-		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(event);
-		return x.keydownHandler(event);
-	}}"
+			${require_host_semantics.applyHostSemantics({
+		role: "group",
+		ariaLabelledBy: (x) => x._computedLabelledBy
+	})}
 		>
-			<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 class="base">
+				<slot
+					name="label"
+					role="presentation"
+					${(0, _microsoft_fast_element.slotted)("_labelSlottedContent")}
+				></slot>
+				<div class="options" role="presentation">
+					<slot @slotchange="${(x) => x._onSlotChange()}"></slot>
+				</div>
 			</div>
-    </template>
+		</template>
 	`;
 };
 //#endregion
-//#region src/lib/combobox/definition.ts
+//#region src/lib/optgroup/definition.ts
 /** @internal */
-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 }
-});
+var optgroupDefinition = require_vivid_element.defineVividComponent("optgroup", Optgroup, OptgroupTemplate, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" });
 /**
-* Registers the combobox elements with the design system.
+* Registers the optgroup element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCombobox = require_vivid_element.createRegisterFunction(comboboxDefinition);
+var registerOptgroup = require_vivid_element.createRegisterFunction(optgroupDefinition);
 //#endregion
-Object.defineProperty(exports, "Combobox", {
+Object.defineProperty(exports, "Optgroup", {
+	enumerable: true,
+	get: function() {
+		return Optgroup;
+	}
+});
+Object.defineProperty(exports, "isOptgroup", {
 	enumerable: true,
 	get: function() {
-		return Combobox;
+		return isOptgroup;
 	}
 });
-Object.defineProperty(exports, "comboboxDefinition", {
+Object.defineProperty(exports, "optgroupDefinition", {
 	enumerable: true,
 	get: function() {
-		return comboboxDefinition;
+		return optgroupDefinition;
 	}
 });
-Object.defineProperty(exports, "registerCombobox", {
+Object.defineProperty(exports, "registerOptgroup", {
 	enumerable: true,
 	get: function() {
-		return registerCombobox;
+		return registerOptgroup;
 	}
 });