@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition30.js

@@ -1,543 +1,87 @@
-import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
-import { t as iconDefinition } from "./definition.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, t as AffixIcon } from "./affix.js";
-import { n as FormAssociated } from "./form-associated.js";
-import { t as FormElement } from "./form-element.js";
-import { t as WithSuccessText } from "./with-success-text.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { t as WithContextualHelp } from "./with-contextual-help.js";
-import { r as chevronTemplateFactory } from "./definition7.js";
-import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
-import { t as text_field_default } from "./text-field.js";
-import { t as listboxOptionDefinition } from "./definition29.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}}::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
+import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
+import { html, observable, slotted } from "@microsoft/fast-element";
+import { uniqueId } from "@microsoft/fast-web-utilities";
+//#region src/lib/optgroup/optgroup.ts
 /**
-* Autocomplete values for combobox.
-* @public
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
 */
-var ComboboxAutocomplete = {
-	inline: "inline",
-	list: "list",
-	both: "both",
-	none: "none"
-};
-//#endregion
-//#region src/lib/combobox/combobox.ts
+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 WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))))) {
+var Optgroup = class extends HostSemantics(VividElement) {
 	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.
-	*
-	* @public
-	* @remarks
-	* Overrides `Listbox.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;
+		this._computedLabelledBy = null;
+	}
+	/** @internal */
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = uniqueId("vvd-optgroup-label-");
+			ids.push(el.id);
 		}
-		super.valueChanged(prev, next);
+		this._computedLabelledBy = ids.join(" ");
 	}
 	/**
-	* Handle opening and closing the listbox when the combobox 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
 	*/
-	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" });
+	_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 = 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);
-	}
 };
-__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);
+__decorate([observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+__decorate([observable], Optgroup.prototype, "_computedLabelledBy", void 0);
 //#endregion
-//#region src/lib/combobox/combobox.template.ts
-var getStateClasses = ({ icon, iconSlottedContent, metaSlottedContent, errorValidationMessage, successText, shape, scale, disabled, placeholder, label, appearance, open, _activeDescendant }) => 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 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="${getStateClasses}" ${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);
+//#region src/lib/optgroup/optgroup.template.ts
+var OptgroupTemplate = () => {
 	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);
-	}}"
+			${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"}"
-					${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 class="base">
+				<slot
+					name="label"
+					role="presentation"
+					${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
-/**
-* @internal
-*/
-var comboboxDefinition = defineVividComponent("combobox", Combobox, comboboxTemplate, [
-	iconDefinition,
-	popupDefinition,
-	listboxOptionDefinition,
-	feedbackMessageDefinition
-], {
-	styles: [text_field_default, combobox_default],
-	shadowOptions: { delegatesFocus: true }
-});
+//#region src/lib/optgroup/definition.ts
+/** @internal */
+var optgroupDefinition = 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 = createRegisterFunction(comboboxDefinition);
+var registerOptgroup = createRegisterFunction(optgroupDefinition);
 //#endregion
-export { registerCombobox as n, Combobox as r, comboboxDefinition as t };
+export { isOptgroup as i, registerOptgroup as n, Optgroup as r, optgroupDefinition as t };