@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition64.cjs

@@ -1,1040 +1,827 @@
-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_delegates_aria = require("./delegates-aria.cjs");
-const require_definition$1 = require("./definition5.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$2 = require("./definition6.cjs");
-const require_definition$3 = require("./definition9.cjs");
-const require_divider = require("./divider.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition$2 = require("./definition9.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_feedback_message = require("./feedback-message.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_mixins = require("./mixins.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_definition$4 = require("./definition29.cjs");
-const require_definition$5 = require("./definition30.cjs");
-const require_extractOptions = require("./extractOptions.cjs");
-const require_definition$6 = require("./definition36.cjs");
-const require_scrollIntoView = require("./scrollIntoView.cjs");
+const require_option = require("./option.cjs");
+const require_definition$3 = require("./definition29.cjs");
+const require_definition$4 = require("./definition30.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/searchable-select/searchable-select.scss?inline
-var searchable_select_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(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset: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)}.fieldset: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}}.fieldset.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)}.fieldset.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}.fieldset: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)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.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)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.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)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.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)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.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)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){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}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{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}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.divider{margin-block:10px;margin-inline:12px}";
-//#endregion
-//#region src/lib/searchable-select/option-tag.scss?inline
-var option_tag_default = ":host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in sRGB, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in sRGB, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--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));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}";
+//#region src/lib/select/select.scss?inline
+var select_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)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-600);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--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(*)){:host(:focus-within) .control:not(.has-activedescendant){--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))}}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
 //#endregion
-//#region src/lib/searchable-select/searchable-select.ts
-var TagGapPx = 8;
-var InputMinWidthPx = 100;
-var PageSize = 10;
-var isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
+//#region src/lib/select/select.ts
+var selectAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /**
 * @public
-* @component searchable-select
-* @slot - Holds the available options.
-* @slot icon - The preferred way to add an icon to the control.
-* @slot meta - Slot to add meta content to the control.
-* @slot helper-text - Describes how to use the component. Alternative to the `helper-text` attribute.
-* @slot no-options - Message that appears when no options are available.
-* @slot no-matches - Message that appears when no options match the search query.
-* @slot loading-options - Message that appears there are no options to display and the component is in a loading state.
-* @event {CustomEvent<undefined>} input - Fired when the selected options change
-* @event {CustomEvent<undefined>} search-text-change - Fired when the search text changes
-* @event {CustomEvent<undefined>} change - Fired when the selected options change
+* @component select
+* @slot - Default slot.
+* @slot icon - The preferred way to add an icon to the select control.
+* @slot meta - Slot to add meta content to the select control.
+* @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
+* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-* @vueModel values values input,@lazy:change `event.currentTarget.values`
 * @testAction selectOptionByValue selectOptionByValue
 * @testAction selectOptionByText selectOptionByText
-* @testQuery values values
-* @testQuery selectedOptions selectedOptionsText
 */
-var SearchableSelect = 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_delegates_aria.DelegatesAria(require_affix.AffixIconWithTrailing(require_localized.Localized(require_form_associated.FormAssociated(require_vivid_element.VividElement))))))))) {
+var Select = class extends require_mixins.WithLightDOMFeedback(require_with_contextual_help.WithContextualHelp(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_localized.Localized(require_form_element.FormElement(require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_form_associated.FormAssociated(require_listbox.Listbox))))))))) {
 	constructor(..._args) {
 		super(..._args);
-		this.fixedDropdown = false;
+		this.proxy = document.createElement("select");
+		this.activeIndex = -1;
+		this.rangeStartIndex = -1;
 		this.open = false;
-		this.multiple = false;
-		this.externalTags = false;
-		this.maxLines = null;
-		this.values = [];
-		this.initialValues = [];
-		this._currentSearchText = null;
-		this._areOptionsInitialized = false;
-		this.#slottedOptionsChangeHandler = { handleChange: (source, _) => {
-			if (source.selected && !this.values.includes(source.value)) this.values = [...this.values, source.value];
-			else if (!source.selected && this.values.includes(source.value)) this.values = this.values.filter((option) => option !== source.value);
-		} };
-		this.#clonedTagIcons = /* @__PURE__ */ new Map();
-		this._filteredOptions = [];
-		this._filteredEnabledOptions = [];
-		this.loading = false;
-		this._highlightedOptionIndex = null;
-		this._numElidedTags = 0;
-		this._tagRows = [];
-		this._lastTagRow = [];
+		this.listboxId = (0, _microsoft_fast_web_utilities.uniqueId)("listbox-");
+		this.maxHeight = 0;
+		this.fixedDropdown = false;
+		this._feedbackWrapper = null;
+		this._isResetting = false;
 		this.clearable = false;
-		this.maxSelected = null;
-		this._slottedDisabledOptions = [];
-		this.enableSelectAll = false;
-		this.proxy = document.createElement("input");
-		this.setFormValue = (value, state) => {
-			if (isFormAssociatedTryingToSetFormValue(value)) return;
-			super.setFormValue(value, state);
-		};
-		this._changeDescription = "";
-		this.#resizeObserver = new ResizeObserver(() => {
-			this.#updateTagLayout();
-		});
-		this.#onOptgroupChange = () => {
-			/* v8 ignore else */
-			if (this._slottedElements) this._slottedElementsChanged();
-		};
-	}
-	/** @internal */
-	openChanged() {
-		if (!this.open) this.#transitionHighlightedOptionTo(null);
-	}
-	/** @internal */
-	valuesChanged() {
-		if (!this._areOptionsInitialized) return;
-		if (!this.multiple && this.values.length > 1) {
-			this.values = [this.values[0]];
-			return;
-		}
-		if (this.values.some((value) => !this.#isValidValue(value))) {
-			this.values = this.values.filter((value) => this.#isValidValue(value));
+		this._isClearButtonFocused = false;
+	}
+	/**
+	* Returns the last checked option.
+	*
+	* @internal
+	*/
+	get activeOption() {
+		return this.options[this.activeIndex];
+	}
+	/**
+	* Returns the list of checked options.
+	*
+	* @internal
+	*/
+	get checkedOptions() {
+		return this.options.filter((o) => o.checked);
+	}
+	/**
+	* Returns the index of the first selected option.
+	*
+	* @internal
+	*/
+	get firstSelectedOptionIndex() {
+		return this.options.indexOf(this.firstSelectedOption);
+	}
+	/**
+	* Updates the `ariaActiveDescendant` property when the active index changes.
+	*
+	* @internal
+	*/
+	activeIndexChanged(_, next) {
+		this._activeDescendant = this.options[next]?.id ?? "";
+		this.focusAndScrollOptionIntoView();
+	}
+	/**
+	* Toggles the checked state for the currently active option.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @internal
+	*/
+	checkActiveIndex() {
+		const activeItem = this.activeOption;
+		/* v8 ignore else -- @preserve */
+		if (activeItem) activeItem.checked = true;
+	}
+	/**
+	* Sets the active index to the first option and marks it as checked.
+	*
+	* @remarks
+	* Multi-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkFirstOption(preserveChecked) {
+		const firstSelectableIndex = this.getNextSelectableIndex(0);
+		if (firstSelectableIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, firstSelectableIndex, this.rangeStartIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = firstSelectableIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Decrements the active index and sets the matching option as checked.
+	*
+	* @remarks
+	* Multi-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkLastOption(preserveChecked) {
+		const lastSelectableIndex = this.getPreviousSelectableIndex(this.length - 1);
+		if (lastSelectableIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, lastSelectableIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = lastSelectableIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Increments the active index and marks the matching option as checked.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkNextOption(preserveChecked) {
+		const nextIndex = this.getNextSelectableIndex(this.activeIndex + 1);
+		if (nextIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, this.rangeStartIndex, nextIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = nextIndex;
+		this.checkActiveIndex();
+	}
+	/**
+	* Decrements the active index and marks the matching option as checked.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - mark all options unchecked before changing the active index
+	*
+	* @internal
+	*/
+	checkPreviousOption(preserveChecked) {
+		const previousIndex = this.getPreviousSelectableIndex(this.activeIndex - 1);
+		if (previousIndex === -1) return;
+		if (preserveChecked) {
+			if (this.rangeStartIndex === -1) this.rangeStartIndex = this.activeIndex;
+			if (this.checkedOptions.length === 1) this.rangeStartIndex += 1;
+			this.options.forEach((o, i) => {
+				o.checked = (0, _microsoft_fast_web_utilities.inRange)(i, previousIndex, this.rangeStartIndex + 1) && !o.disabled;
+			});
+		} else this.uncheckAllOptions();
+		this.activeIndex = previousIndex;
+		this.checkActiveIndex();
+	}
+	/** @internal */
+	focusAndScrollOptionIntoView() {
+		super.focusAndScrollOptionIntoView(this.activeOption);
+	}
+	/**
+	* In multiple-selection mode:
+	* If any options are selected, the first selected option is checked when
+	* the listbox receives focus. If no options are selected, the first
+	* selectable option is checked.
+	*
+	* @internal
+	*/
+	focusinHandler(e) {
+		if (!this.multiple) {
+			super.focusinHandler(e);
 			return;
 		}
-		this.value = this.values.length ? this.values[0] : "";
-		this.#updateSelectionLimit();
-		this.#updateSelectedOnSlottedOptions();
-		if (this.$fastController.isConnected) this.#updateTagLayout();
-		this.#updateFormValue();
-	}
-	#updateValuesThroughUserInteraction(newValues) {
-		this.values = newValues;
-		this.$emit("change", void 0, { bubbles: false });
-		this.$emit("input", void 0, { bubbles: false });
-	}
-	#updateValuesWhileMaintainingOrder(newValues) {
-		const oldSet = new Set(this.values);
-		const newSet = new Set(newValues);
-		this.values = [...this.values].filter((v) => newSet.has(v)).concat([...newValues].filter((v) => !oldSet.has(v)));
-	}
-	/** @internal */
-	initialValuesChanged() {
-		if (!this.dirtyValue) {
-			this.values = this.initialValues;
-			this.dirtyValue = false;
-		}
-	}
-	#isValidValue(value) {
-		return this._slottedOptions.some((option) => option.value === value);
-	}
-	/** @internal */
-	valueChanged(prev, next) {
-		super.valueChanged(prev, next);
-		if (!this._areOptionsInitialized) return;
-		const isValidValue = this._slottedOptions.some((option) => option.value === next);
-		if (this.values[0] !== next) this.values = isValidValue ? [next] : [];
-	}
-	get selectedIndex() {
-		if (this.values.length) return this._slottedOptions.findIndex((option) => option.value === this.values[0]);
-		else return -1;
-	}
-	set selectedIndex(index) {
-		this.value = this._slottedOptions[index]?.value ?? "";
-	}
-	get options() {
-		return [...this._slottedOptions];
-	}
-	get selectedOptions() {
-		return this._slottedOptions.filter((option) => this.values.includes(option.value));
-	}
-	/** @internal */
-	_currentSearchTextChanged() {
-		this.#updateFilteredOptions();
-		this.$emit("search-text-change", void 0, {
-			bubbles: false,
-			composed: false
-		});
-	}
-	/** Read-only property containing the current search text. */
-	get searchText() {
-		return this._currentSearchText ?? "";
-	}
-	/** @internal */
-	get _inputValue() {
-		return this._currentSearchText ?? (!this.multiple && this.value !== "" ? this.#textForValue(this.value) ?? "" : "");
-	}
-	/** @internal */
-	_onInputInput(event) {
-		this._currentSearchText = event.target.value;
-	}
-	/** @internal */
-	_onInputFocus(_) {
-		this.#updateFilteredOptions();
-	}
-	/** @internal */
-	_onInputBlur(_) {
-		this.open = false;
-		this._currentSearchText = null;
-		this._changeDescription = "";
-	}
-	/** @internal */
-	_onInputKeydown(e) {
-		if (e.ctrlKey || e.shiftKey) return true;
-		switch (e.key) {
-			case "Enter":
-				this.#selectHighlightedOption();
-				if (this._inputValue === "") this.open = !this.open;
-				return false;
-			case "Escape":
-				this.open = false;
-				break;
-			case "Home":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightFirstOption();
-				return false;
-			case "End":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightLastOption();
-				return false;
-			case "PageUp":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightPrevPage();
-				return false;
-			case "PageDown":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightNextPage();
-				return false;
-			case "ArrowUp":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightPreviousOption();
-				return false;
-			case "ArrowDown":
-				if (!this.open) {
-					this.open = true;
-					break;
-				}
-				this.#highlightNextOption();
-				return false;
-			case "ArrowLeft":
-				if (this.multiple && this._inputValue === "" && this.values.length && !this.externalTags) {
-					this.#moveTagFocusTo(this.#nextTagIndexLeft(this.values.length));
-					return false;
-				}
-				return true;
-			case "Backspace":
-				if (this.multiple && this._inputValue === "" && this.values.length) {
-					this._onTagRemoved(this.values[this.values.length - 1]);
-					return false;
-				}
-				return true;
-			default:
-				/* v8 ignore next -- @preserve */
-				if (!this.open) this.open = true;
-				return true;
+		/* v8 ignore else -- @preserve */
+		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
+			this.uncheckAllOptions();
+			if (this.activeIndex === -1) this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
+			this.checkActiveIndex();
+			this.setSelectedOptions();
+			this.focusAndScrollOptionIntoView();
 		}
-		return true;
-	}
-	/** @internal */
-	_slottedElementsChanged() {
-		this._slottedOptions = require_extractOptions.extractOptions(this._slottedElements);
+		this.shouldSkipFocus = false;
 	}
-	/** @internal */
-	_slottedOptionsChanged(oldValue, newValue) {
-		const hasSlottedOptions = Boolean(this.querySelectorAll(`:not([slot])`).length);
-		if (!newValue.length && hasSlottedOptions) return;
-		this._areOptionsInitialized = true;
-		if (oldValue) {
-			this._slottedDisabledOptions = [];
-			for (const option of oldValue) _microsoft_fast_element.Observable.getNotifier(option).unsubscribe(this.#slottedOptionsChangeHandler, "selected");
+	/** Sets an option as selected and gives it focus. */
+	setSelectedOptions() {
+		if (!this.multiple) {
+			super.setSelectedOptions();
+			return;
 		}
 		/* v8 ignore else -- @preserve */
-		if (newValue) for (const option of newValue) {
-			option._displayCheckmark = true;
-			_microsoft_fast_element.Observable.getNotifier(option).subscribe(this.#slottedOptionsChangeHandler, "selected");
-		}
-		const values = [];
-		for (const option of this._slottedOptions) {
-			if (option.selected || option.value === this.value || this.values.includes(option.value)) values.push(option.value);
-			if (option.disabled) this._slottedDisabledOptions.push(option);
+		if (this.$fastController.isConnected && this.options) {
+			this.selectedOptions = this.options.filter((o) => o.selected);
+			this.focusAndScrollOptionIntoView();
 		}
-		this.#updateValuesWhileMaintainingOrder(values);
-		this.#updateFilteredOptions();
-		this.#updateSelectionLimit();
 	}
-	#slottedOptionsChangeHandler;
-	#updateSelectedOnSlottedOptions() {
-		for (const option of this._slottedOptions) {
-			option.selected = this.values.includes(option.value);
-			this.#updateClonedTagIconOfOption(option);
+	/**
+	* Toggles the selected state of the provided options. If any provided items
+	* are in an unselected state, all items are set to selected. If every
+	* provided item is selected, they are all unselected.
+	*
+	* @internal
+	*/
+	toggleSelectedForAllCheckedOptions() {
+		const enabledCheckedOptions = this.checkedOptions.filter((o) => !o.disabled);
+		const force = !enabledCheckedOptions.every((o) => o.selected);
+		enabledCheckedOptions.forEach((o) => o.selected = force);
+		this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
+		this.setSelectedOptions();
+		this.updateValue(true);
+	}
+	/** @internal */
+	typeaheadBufferChanged(prev, next) {
+		if (!this.multiple) {
+			super.typeaheadBufferChanged(prev, next);
+			return;
 		}
-	}
-	#handleOptionInteraction(option) {
-		const value = option.value;
-		let newValues;
-		let shouldClearSearchText = false;
-		const isSelection = !this.values.includes(value);
-		if (this.multiple) {
-			if (isSelection) newValues = [...this.values, value];
-			else newValues = this.values.filter((option) => option !== value);
-			shouldClearSearchText = true;
-		} else {
-			if (isSelection) {
-				newValues = [value];
-				shouldClearSearchText = true;
-			} else newValues = [];
-			this.open = false;
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			const typeaheadMatches = this.getTypeaheadMatches();
+			const activeIndex = this.options.indexOf(typeaheadMatches[0]);
+			if (activeIndex > -1) {
+				this.activeIndex = activeIndex;
+				this.uncheckAllOptions();
+				this.checkActiveIndex();
+			}
+			this.typeaheadExpired = false;
 		}
-		this.#updateValuesThroughUserInteraction(newValues);
-		const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(option._getAccessibleName());
-		const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : "";
-		this._changeDescription = `${optionMessage} ${maxSelectedMessage}`;
-		if (shouldClearSearchText) this._currentSearchText = null;
-	}
-	#clonedTagIcons;
-	#tagIconOfOption(option) {
-		return option.querySelector("[slot=\"tag-icon\"]");
-	}
-	/** @internal */
-	_tagIconSlotName(value) {
-		return `_tag-icon-${this.values.indexOf(value)}`;
 	}
-	#updateClonedTagIconOfOption(option) {
-		if (option.selected && this.#tagIconOfOption(option)) {
-			let clone = this.#clonedTagIcons.get(option);
-			/* v8 ignore else -- @preserve */
-			if (!clone) {
-				clone = this.#tagIconOfOption(option).cloneNode(true);
-				this.#clonedTagIcons.set(option, clone);
-			}
-			clone.slot = this._tagIconSlotName(option.value);
-			this.appendChild(clone);
-		} else {
-			const clone = this.#clonedTagIcons.get(option);
-			if (clone) {
-				clone.remove();
-				this.#clonedTagIcons.delete(option);
-			}
+	/**
+	* Unchecks all options.
+	*
+	* @remarks
+	* Multiple-selection mode only.
+	*
+	* @param preserveChecked - reset the rangeStartIndex
+	*
+	* @internal
+	*/
+	uncheckAllOptions(preserveChecked = false) {
+		this.options.forEach((o) => o.checked = false);
+		/* v8 ignore else -- @preserve */
+		if (!preserveChecked) this.rangeStartIndex = -1;
+	}
+	/**
+	* Sets focus when the open property changes.
+	*
+	* @internal
+	*/
+	openChanged(prev, next) {
+		if (!this.collapsible) return;
+		if (this.open) {
+			this.focusAndScrollOptionIntoView();
+			this.indexWhenOpened = this.selectedIndex;
+			_microsoft_fast_element.Updates.enqueue(() => this.focus());
+			return;
 		}
+		const didClose = prev && !next;
+		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
+		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
 	}
-	/** @internal */
-	optionFilterChanged() {
-		this.#updateFilteredOptions();
+	/**
+	* The component is collapsible when in single-selection mode.
+	*
+	* @internal
+	*/
+	get collapsible() {
+		return !this.multiple;
 	}
 	/** @internal */
-	loadingChanged(_oldValue, newValue) {
-		this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage;
-		if (_oldValue && !newValue) this._changeDescription = "";
-	}
-	#updateFilteredOptions() {
-		const newFilteredOptions = [];
-		const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
-		for (const option of this._slottedOptions ?? []) {
-			option._vvdSearchText = this.searchText;
-			const matches = !this.searchText || optionFilter(option, this.searchText);
-			option._isNotMatching = !matches;
-			if (!option.hidden && matches) newFilteredOptions.push(option);
-		}
-		/* v8 ignore next -- _slottedElements not yet set if filtering is triggered before slot initialises */
-		for (const el of this._slottedElements ?? []) if (require_definition$5.isOptgroup(el)) {
-			const hasVisibleOption = Array.from(el.children).some((child) => require_definition$4.isListboxOption(child) && !child._isNotMatching && !child.hidden);
-			el.style.display = hasVisibleOption ? "" : "none";
+	valueChanged(prev, next) {
+		const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
+		const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
+		const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
+		if (this.selectedIndex !== validNextSelectedIndex) this.selectedIndex = validNextSelectedIndex;
+		if (next !== nextValue) return;
+		super.valueChanged(prev, next);
+		this.updateDisplayValue();
+	}
+	/**
+	* Sets the value and display value to match the first selected option.
+	*
+	* @param shouldEmit - if true, the input and change events will be emitted
+	*
+	* @internal
+	*/
+	updateValue(shouldEmit) {
+		if (this.$fastController.isConnected) this.value = this.firstSelectedOption?.value ?? "";
+		if (shouldEmit) {
+			this.$emit("input");
+			this.$emit("change", this, {
+				bubbles: true,
+				composed: void 0
+			});
 		}
-		this.#transitionHighlightedOptionTo(null);
-		this._filteredOptions = newFilteredOptions;
-		const enabled = newFilteredOptions.filter((o) => !o.disabled);
-		if (this._selectAllOption) this._filteredEnabledOptions = [this._selectAllOption, ...enabled];
-		else this._filteredEnabledOptions = enabled;
 	}
-	#transitionHighlightedOptionTo(index) {
-		if (typeof this._highlightedOptionIndex === "number") {
-			const prevOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
-			prevOption._highlighted = false;
-		}
-		if (typeof index === "number") if (!this._filteredEnabledOptions.length) index = null;
-		else index = Math.max(0, Math.min(this._filteredEnabledOptions.length - 1, index));
-		this._highlightedOptionIndex = index;
-		if (typeof this._highlightedOptionIndex === "number") {
-			const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
-			highlightedOption._highlighted = true;
-			require_scrollIntoView.scrollIntoView(highlightedOption, this._listbox, "nearest");
-			this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(highlightedOption._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, highlightedOption.selected);
-		}
+	/**
+	* Updates the proxy value when the selected index changes.
+	*
+	* @param prev - the previous selected index
+	* @param next - the next selected index
+	*
+	* @internal
+	*/
+	selectedIndexChanged(prev, next) {
+		super.selectedIndexChanged(prev, next);
+		this.updateValue();
+	}
+	/**
+	* Handle opening and closing the listbox when the select is clicked.
+	*
+	* @param e - the mouse event
+	* @internal
+	*/
+	clickHandler(e) {
+		if (this.disabled || this._isFromContextualHelp(e)) return;
+		const clickedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
+		if (clickedOption && clickedOption.disabled) return;
+		if (this.multiple) {
+			this.uncheckAllOptions();
+			this.activeIndex = this.options.indexOf(clickedOption);
+			this.checkActiveIndex();
+			this.toggleSelectedForAllCheckedOptions();
+		} else super.clickHandler(e);
+		if (this.collapsible) this.open = !this.open;
+		return true;
 	}
-	#selectHighlightedOption() {
-		if (this._highlightedOptionIndex === null) return;
-		const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
-		if (highlightedOption.getAttribute("data-select-all") !== null) {
-			this._toggleSelectAll();
+	/**
+	* Handles focus state when the element or its children lose focus.
+	*
+	* @param e - The focus event
+	* @internal
+	*/
+	focusoutHandler(e) {
+		if (this.multiple) this.uncheckAllOptions();
+		if (!this.open) return true;
+		const focusTarget = e.relatedTarget;
+		if (this.isSameNode(focusTarget)) {
+			this.focus();
 			return;
 		}
-		this.#handleOptionInteraction(highlightedOption);
-	}
-	#highlightFirstOption() {
-		this.#transitionHighlightedOptionTo(0);
-	}
-	#highlightLastOption() {
-		this.#transitionHighlightedOptionTo(this._filteredEnabledOptions.length - 1);
-	}
-	#highlightPrevPage() {
-		this.#transitionHighlightedOptionTo((this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - PageSize);
-	}
-	#highlightNextPage() {
-		this.#transitionHighlightedOptionTo((this._highlightedOptionIndex ?? -1) + PageSize);
-	}
-	#highlightPreviousOption() {
-		this.#transitionHighlightedOptionTo((this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - 1);
-	}
-	#highlightNextOption() {
-		this.#transitionHighlightedOptionTo((this._highlightedOptionIndex ?? -1) + 1);
-	}
-	/** @internal */
-	_tagLabelForValue(value) {
-		return this._slottedOptions.find((option) => option.value === value).label;
-	}
-	/** @internal */
-	_tagConnotationForValue(value) {
-		return this._slottedOptions.find((option) => option.value === value).tagConnotation;
-	}
-	/** @internal */
-	_isTagDisabled(value) {
-		const option = this._slottedOptions.find((option) => option.value === value);
-		return this.disabled || option.disabled;
-	}
-	#textForValue(value) {
-		return (this._slottedOptions?.find((option) => option.value === value))?.label;
+		/* v8 ignore else -- @preserve */
+		if (!this.options.includes(focusTarget)) {
+			this.open = false;
+			if (this.indexWhenOpened !== this.selectedIndex) this.updateValue(true);
+		}
 	}
-	/** @internal */
-	#measureTagWidth(label, removable, hasIcon) {
-		const tag = document.createElement(this._optionTagTagName);
-		tag.label = label;
-		tag.removable = removable;
-		tag.style.cssText = "position: absolute; visibility: hidden;";
-		tag.hasIconPlaceholder = hasIcon;
-		this.shadowRoot.appendChild(tag);
-		const width = tag.getBoundingClientRect().width;
-		tag.remove();
-		return width;
+	/**
+	* Updates the value when an option's value changes.
+	*
+	* @param source - the source object
+	* @param propertyName - the property to evaluate
+	*
+	* @internal
+	*/
+	handleChange(source, propertyName) {
+		super.handleChange(source, propertyName);
+		if (propertyName === "value") this.updateValue();
+	}
+	/**
+	* Prevents focus when a scrollbar is clicked.
+	*
+	* @param e - the mouse event object
+	*
+	* @internal
+	*/
+	mousedownHandler(e) {
+		if (e.offsetX >= 0 && e.offsetX <= this.listbox.scrollWidth) return super.mousedownHandler(e);
+		return this.collapsible;
+	}
+	/** @internal */
+	multipleChanged(_, next) {
+		this.options.forEach((o) => {
+			o.checked = next ? false : void 0;
+		});
+		this.setSelectedOptions();
+		/* v8 ignore if -- @preserve */
+		if (this.proxy) this.proxy.multiple = next;
+	}
+	/**
+	* Updates the selectedness of each option when the list of selected options changes.
+	*
+	* @param prev - the previous list of selected options
+	* @param next - the current list of selected options
+	*
+	* @internal
+	*/
+	selectedOptionsChanged(prev, next) {
+		super.selectedOptionsChanged(prev, next);
+		this.options.forEach((o, i) => {
+			const proxyOption = this.proxy.options.item(i);
+			if (proxyOption) proxyOption.selected = o.selected;
+		});
 	}
-	#updateTagLayout() {
-		if (!this.multiple) {
-			this._numElidedTags = 0;
-			this._tagRows = [];
-			this._lastTagRow = [];
-			return;
-		}
-		if (this.externalTags) {
-			this._numElidedTags = this.values.length;
-			this._tagRows = [];
-			this._lastTagRow = [];
-			return;
+	/**
+	* Resets and fills the proxy to match the component's options.
+	*
+	* @internal
+	*/
+	setProxyOptions() {
+		/* v8 ignore else -- @preserve */
+		if (this.proxy instanceof HTMLSelectElement && this.options) {
+			this.proxy.length = 0;
+			this.options.forEach((option) => {
+				const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
+				if (proxyOption) this.proxy.options.add(proxyOption);
+			});
 		}
-		const rowWidth = this._contentArea.getBoundingClientRect().width;
-		const rows = [[]];
-		let currentRowIndex = 0;
-		let currentRowWidth = InputMinWidthPx;
-		let i;
-		for (i = this.values.length - 1; i >= 0; i--) {
-			const isLastRow = this.maxLines && currentRowIndex === this.maxLines - 1;
-			const tagWidth = this.#measureTagWidth(this._tagLabelForValue(this.values[i]), true, this.#tagIconOfOption(this.selectedOptions[i]) !== null);
-			const entry = {
-				value: this.values[i],
-				width: tagWidth
-			};
-			let elidedTagCounterWidth = 0;
-			if (isLastRow) {
-				const numElidedTags = i;
-				if (numElidedTags) elidedTagCounterWidth = TagGapPx + this.#measureTagWidth(numElidedTags.toString(), false, false);
-			}
-			if (currentRowWidth + TagGapPx + tagWidth + elidedTagCounterWidth > rowWidth) {
-				if (isLastRow) if (i === this.values.length - 1) {
-					rows[currentRowIndex].unshift(entry);
-					currentRowWidth += TagGapPx + tagWidth;
-				} else break;
-				else {
-					rows.push([]);
-					currentRowIndex++;
-					rows[currentRowIndex].unshift(entry);
-					currentRowWidth = tagWidth;
+	}
+	/**
+	* Handles keydown actions when the select is in multiple selection mode.
+	*
+	* @internal
+	*/
+	multipleKeydownHandler(e) {
+		if (this.disabled) return;
+		const { key, shiftKey } = e;
+		this.shouldSkipFocus = false;
+		switch (key) {
+			case _microsoft_fast_web_utilities.keyHome:
+				this.checkFirstOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyArrowDown:
+				this.checkNextOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyArrowUp:
+				this.checkPreviousOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyEnd:
+				this.checkLastOption(shiftKey);
+				return;
+			case _microsoft_fast_web_utilities.keyTab:
+				this.focusAndScrollOptionIntoView();
+				return;
+			case _microsoft_fast_web_utilities.keyEscape:
+				this.uncheckAllOptions();
+				this.checkActiveIndex();
+				return;
+			case _microsoft_fast_web_utilities.keySpace:
+				e.preventDefault();
+				/* v8 ignore else -- @preserve */
+				if (this.typeaheadExpired) {
+					this.toggleSelectedForAllCheckedOptions();
+					return;
 				}
-				continue;
-			}
-			rows[currentRowIndex].unshift(entry);
-			currentRowWidth += TagGapPx + tagWidth;
-		}
-		this._numElidedTags = i + 1;
-		rows.reverse();
-		for (let i = 0; i < rows.length - 1; i++) {
-			let lineWidth = rows[i].map((e) => e.width).reduce((a, b) => a + b, 0) + (rows[i].length - 1) * TagGapPx;
-			if (i === 0 && this._numElidedTags) lineWidth += TagGapPx + this.#measureTagWidth(this._numElidedTags.toString(), false, false);
-			while (rows[i + 1].length && lineWidth + TagGapPx + rows[i + 1][0].width <= rowWidth) {
-				const nextTag = rows[i + 1].shift();
-				rows[i].push(nextTag);
-				lineWidth += TagGapPx + nextTag.width;
-			}
+			default:
+				/* v8 ignore else -- @preserve */
+				if (key.length === 1) this.handleTypeAhead(key);
+				return;
 		}
-		const rowValues = rows.map((line) => line.map((entry) => entry.value));
-		this._tagRows = rowValues.slice(0, -1);
-		this._lastTagRow = rowValues.slice(-1)[0];
-	}
-	/** @internal */
-	_onTagRemoved(value) {
-		this.#updateValuesThroughUserInteraction(this.values.filter((option) => option !== value));
-		this.#updateFilteredOptions();
 	}
-	/** @internal */
-	_onTagKeydown(event) {
-		const tagIndex = parseInt(event.target.dataset.index);
-		switch (event.key) {
-			case "Backspace":
-			case "Delete":
-			case "Enter":
-			case " ":
-				this._onTagRemoved(this.values[tagIndex]);
-				_microsoft_fast_element.Updates.process();
-				this.#moveTagFocusTo(this.#nextTagIndexForRemoved(tagIndex));
+	/**
+	* Handle keyboard interaction for the select.
+	*
+	* @param e - the keyboard event
+	* @internal
+	*/
+	keydownHandler(e) {
+		const selectedIndexBefore = this.selectedIndex;
+		if (this.multiple) this.multipleKeydownHandler(e);
+		else super.keydownHandler(e);
+		switch (e.key) {
+			case _microsoft_fast_web_utilities.keySpace:
+				e.preventDefault();
+				if (this.collapsible && this.typeaheadExpired) this.open = !this.open;
 				break;
-			case "ArrowLeft":
-				this.#moveTagFocusTo(this.#nextTagIndexLeft(tagIndex) ?? tagIndex);
+			case _microsoft_fast_web_utilities.keyHome:
+			case _microsoft_fast_web_utilities.keyEnd:
+				e.preventDefault();
 				break;
-			case "ArrowRight":
-				this.#moveTagFocusTo(this.#nextTagIndexRight(tagIndex));
+			case _microsoft_fast_web_utilities.keyEnter:
+				e.preventDefault();
+				this.open = !this.open;
 				break;
+			case _microsoft_fast_web_utilities.keyEscape:
+				if (this.collapsible && this.open) {
+					e.preventDefault();
+					this.open = false;
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyTab:
+				if (this.collapsible && this.open) this.open = false;
+				return true;
 		}
-		return true;
-	}
-	#moveTagFocusTo(index) {
-		if (index === null) this._input.focus();
-		else this.shadowRoot.querySelector(`[data-index="${index}"]`)?.focus();
-	}
-	#nextTagIndexLeft(index) {
-		if (!this.values.length) return null;
-		for (let i = index - 1; i >= 0; i--) if (!this._isTagDisabled(this.values[i])) return i;
-		return null;
-	}
-	#nextTagIndexRight(index) {
-		if (!this.values.length) return null;
-		for (let i = index + 1; i < this.values.length; i++) if (!this._isTagDisabled(this.values[i])) return i;
-		return null;
-	}
-	#nextTagIndexForRemoved(index) {
-		return this.#nextTagIndexRight(index - 1) ?? this.#nextTagIndexLeft(index);
-	}
-	/** @internal */
-	_onListboxClick(e) {
-		if (this.disabled) return;
-		const capturedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
-		if (capturedOption?.getAttribute("data-select-all") !== null) {
-			this._toggleSelectAll();
-			return;
-		}
-		if (capturedOption && !capturedOption.disabled) this.#handleOptionInteraction(capturedOption);
-	}
-	/** @internal */
-	get _shouldShowClearButton() {
-		return this.clearable && this.values.length > 0;
-	}
-	/** @internal */
-	_onClearButtonClick() {
-		this.#updateValuesThroughUserInteraction(this.selectedOptions.filter((option) => option.disabled).map((option) => option.value));
-	}
-	/** @internal */
-	maxSelectedChanged() {
-		this.#updateSelectionLimit();
+		if (this.collapsible && !this.open && this.selectedIndex !== selectedIndexBefore) this.updateValue(true);
+		return !(e.key === _microsoft_fast_web_utilities.keyArrowDown || e.key === _microsoft_fast_web_utilities.keyArrowUp);
 	}
-	#updateSelectionLimit() {
-		if (!this.multiple || !this._slottedOptions || typeof this.maxSelected !== "number" || this.maxSelected <= 0) return;
-		const options = this._slottedOptions.filter((option) => !this._slottedDisabledOptions.includes(option));
-		if (this.values.length >= this.maxSelected) {
-			const unselectedOptions = options.filter((option) => !this.selectedOptions.includes(option));
-			for (const option of unselectedOptions) option.disabled = true;
-		} else for (const option of options) option.disabled = false;
-	}
-	/** @internal */
-	get _hasSelectionCount() {
-		return this.multiple && this.maxSelected && this.maxSelected >= 1;
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("focusout", this.focusoutHandler);
+		this.addEventListener("contentchange", this.updateDisplayValue);
 	}
-	/** @internal */
-	get _selectableOptions() {
-		return this._slottedOptions?.filter((o) => !this._slottedDisabledOptions.includes(o) && !o.disabled) ?? [];
+	disconnectedCallback() {
+		this.removeEventListener("focusout", this.focusoutHandler);
+		this.removeEventListener("contentchange", this.updateDisplayValue);
+		super.disconnectedCallback();
 	}
 	/** @internal */
-	get _selectAllLabel() {
-		return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+	updateDisplayValue() {
+		if (this.collapsible) _microsoft_fast_element.Observable.notify(this, "displayValue");
 	}
-	/** @internal */
-	get _isAllSelected() {
-		const selectedValues = this.values;
-		if (!this.multiple || !this._slottedOptions) return false;
-		const selectable = this._selectableOptions;
-		if (selectable.length === 0) return false;
-		const selected = new Set(selectedValues);
-		return selectable.every((o) => selected.has(o.value));
+	get displayValue() {
+		_microsoft_fast_element.Observable.track(this, "displayValue");
+		return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
 	}
-	/** @internal */
-	_toggleSelectAll() {
-		const selectableValues = this._selectableOptions.map((o) => o.value);
-		if (this._isAllSelected) {
-			const updatedValues = this.values.filter((v) => !selectableValues.includes(v));
-			this.#updateValuesThroughUserInteraction(updatedValues);
-			this._changeDescription = this.locale.searchableSelect.deselectedAllMessage;
-			return;
+	_newDefaultSelectedIndex(prev, next, currentSelectIndex) {
+		const defaultSelectedIndex = super._newDefaultSelectedIndex(prev, next, currentSelectIndex);
+		if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
+			const firstSelectableIndex = this.getNextSelectableIndex(0);
+			if (firstSelectableIndex !== -1) return firstSelectableIndex;
 		}
-		const missingValues = selectableValues.filter((v) => !this.values.includes(v));
-		const updatedValues = [...this.values, ...missingValues];
-		this.#updateValuesThroughUserInteraction(updatedValues);
-		this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+		return defaultSelectedIndex;
 	}
-	#determineInitialValues() {
-		return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
-	}
-	/** @internal */
-	nameChanged(previous, next) {
-		super.nameChanged(previous, next);
-		this.#updateFormValue();
+	_isDefaultSelected(option) {
+		return super._isDefaultSelected(option) || option.value === this.initialValue || !this._isResetting && option.value === this.value;
 	}
-	#updateFormValue() {
-		if (!this.name) this.setFormValue(null);
-		else {
-			const formData = new FormData();
-			for (const value of this.values) formData.append(this.name, value);
-			this.setFormValue(formData);
-		}
+	slottedOptionsChanged(prev, next) {
+		this.options.forEach((o) => {
+			_microsoft_fast_element.Observable.getNotifier(o).unsubscribe(this, "value");
+		});
+		super.slottedOptionsChanged(prev, next);
+		this.options.forEach((o) => {
+			_microsoft_fast_element.Observable.getNotifier(o).subscribe(this, "value");
+		});
+		this.setProxyOptions();
+		this.updateValue();
+		const scale = this.getAttribute("scale") || this.scale;
+		next.forEach((element) => {
+			if (scale) {
+				element.setAttribute("scale", scale);
+				element.scale = scale;
+			}
+		});
+		this.proxy.value = this.value;
+		this.validate();
 	}
-	/** @internal */
 	formResetCallback() {
-		super.formResetCallback();
-		this.#updateValuesThroughUserInteraction(this.#determineInitialValues());
+		this.setProxyOptions();
+		this._isResetting = true;
+		this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
+		this._isResetting = false;
 	}
-	#resizeObserver;
 	/** @internal */
-	_onFieldsetClick(e) {
-		if (this.disabled) return;
-		if (!e.defaultPrevented) {
-			this._input.focus();
-			this.open = true;
-		}
+	get _shouldShowClearButton() {
+		if (!this.clearable) return false;
+		if (this.multiple) return this.selectedOptions?.length > 0;
+		return this.value !== "";
 	}
 	/** @internal */
-	_onChevronClick() {
-		if (this.open) {
-			this.open = false;
-			return false;
-		}
-		return true;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		if (!this.values.length) this.values = this.#determineInitialValues();
-		this.#resizeObserver.observe(this._contentArea);
-		this.addEventListener("optgroup-change", this.#onOptgroupChange);
+	_onClearButtonFocus() {
+		this._isClearButtonFocused = true;
+		this.activeIndex = -1;
+		this.uncheckAllOptions();
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("optgroup-change", this.#onOptgroupChange);
-		this.#resizeObserver.disconnect();
-	}
-	#onOptgroupChange;
 	/** @internal */
-	validate() {
-		super.validate(this._input ?? void 0);
+	_onClearButtonBlur() {
+		this._isClearButtonFocused = false;
 	}
 	/** @internal */
-	focus(options) {
-		this._input?.focus(options);
+	get _shouldShowLabelWrapper() {
+		return Boolean(this.label || this._hasContextualHelp || this.multiple && this._shouldShowClearButton);
 	}
 	/** @internal */
-	_onMouseDown(event) {
-		const originalTarget = event.composedPath()[0];
-		if (!event.defaultPrevented && originalTarget !== this._input && !this._isFromContextualHelp(event)) {
-			this._input.focus();
-			return false;
-		}
-		return true;
+	_onClearButtonClick() {
+		if (this.multiple) this.selectedOptions.forEach((o) => {
+			/* v8 ignore else -- @preserve */
+			if (!o.disabled) o.selected = false;
+		});
+		else this.selectedIndex = -1;
+		this.updateValue(true);
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], SearchableSelect.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], SearchableSelect.prototype, "shape", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], SearchableSelect.prototype, "scale", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "activeIndex", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "multiple", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "fixed-dropdown"
-})], SearchableSelect.prototype, "fixedDropdown", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], SearchableSelect.prototype, "placeholder", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SearchableSelect.prototype, "open", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SearchableSelect.prototype, "multiple", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "external-tags",
+	attribute: "open",
 	mode: "boolean"
-})], SearchableSelect.prototype, "externalTags", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "max-lines",
-	converter: _microsoft_fast_element.nullableNumberConverter
-})], SearchableSelect.prototype, "maxLines", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "values", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "initialValues", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_input", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_currentSearchText", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_slottedElements", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_slottedOptions", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "optionFilter", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_filteredOptions", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_filteredEnabledOptions", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SearchableSelect.prototype, "loading", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_highlightedOptionIndex", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_contentArea", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_numElidedTags", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_tagRows", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_lastTagRow", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_listbox", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SearchableSelect.prototype, "clearable", void 0);
+})], Select.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.volatile], Select.prototype, "collapsible", null);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "control", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "maxHeight", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_anchor", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Select.prototype, "scale", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "shape", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "max-selected",
-	converter: _microsoft_fast_element.nullableNumberConverter
-})], SearchableSelect.prototype, "maxSelected", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_slottedDisabledOptions", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "enable-select-all",
-	mode: "boolean"
-})], SearchableSelect.prototype, "enableSelectAll", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "select-all-text" })], SearchableSelect.prototype, "selectAllText", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "deselect-all-text" })], SearchableSelect.prototype, "deselectAllText", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_selectAllOption", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_changeDescription", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], SearchableSelect.prototype, "_anchor", void 0);
-//#endregion
-//#region src/lib/searchable-select/option-tag.ts
-var OptionTag = class extends require_localized.Localized(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.removable = false;
-		this.disabled = false;
-		this.hasIconPlaceholder = false;
-	}
-	/** @internal */
-	_onClickRemove() {
-		this.$emit("remove", void 0, { bubbles: false });
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], OptionTag.prototype, "shape", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], OptionTag.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], OptionTag.prototype, "label", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], OptionTag.prototype, "removable", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], OptionTag.prototype, "disabled", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], OptionTag.prototype, "hasIconPlaceholder", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], OptionTag.prototype, "scale", void 0);
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], Select.prototype, "fixedDropdown", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Select.prototype, "placeholder", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_feedbackWrapper", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "metaSlottedContent", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "clearable", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_isClearButtonFocused", void 0);
 //#endregion
-//#region src/lib/searchable-select/searchable-select.template.ts
+//#region src/lib/select/select.template.ts
 function renderLabel() {
-	return _microsoft_fast_element.html`
-		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
-	`;
+	return _microsoft_fast_element.html` <label
+		for="${(x) => x.multiple ? null : "control"}"
+		class="label"
+		id="label"
+	>
+		${(x) => x.label}
+	</label>`;
 }
-function renderSelectionCount() {
+function renderPlaceholder(context) {
+	const optionTag = context.tagFor(require_option.ListboxOption);
 	return _microsoft_fast_element.html`
-		<span
-			id="selection-count"
-			class="selection-count"
-			aria-label="${(x) => x.locale.searchableSelect.maxSelectedMessage(x.values.length, x.maxSelected)}"
-			>(${(x) => `${x.values.length}/${x.maxSelected}`})</span
-		>
-	`;
+		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
+		</${optionTag}>`;
 }
-var tagTemplateFactory = (context, getComponent) => {
-	const optionTagTag = context.tagFor(OptionTag);
-	return _microsoft_fast_element.html`
-		<div class="tag-wrapper">
-			<${optionTagTag}
-				class="tag"
-				tabindex="-1"
-				data-index="${(x, c) => getComponent(c).values.indexOf(x)}"
-				removable
-				:label="${(x, c) => getComponent(c)._tagLabelForValue(x)}"
-				:shape="${(_, c) => getComponent(c).shape}"
-				:connotation="${(x, c) => getComponent(c)._tagConnotationForValue(x)}"
-				:scale="${(_, c) => getComponent(c).scale}"
-				?disabled="${(x, c) => getComponent(c)._isTagDisabled(x)}"
-				@remove="${(x, c) => getComponent(c)._onTagRemoved(x)}"
-				@keydown="${(_, c) => getComponent(c)._onTagKeydown(c.event)}"
-				@mousedown="${() => false}">
-				<slot slot="icon" name="${(x, c) => getComponent(c)._tagIconSlotName(x)}"></slot>
-			</${optionTagTag}>
-		</div>
-	`;
-};
-var elidedTagTemplateFactory = (context, getComponent) => {
-	const optionTagTag = context.tagFor(OptionTag);
-	return _microsoft_fast_element.html`
-		<${optionTagTag}
-			class="tag"
-			tabindex="-1"
-			:label="${(x, c) => getComponent(x, c)._numElidedTags.toString()}"
-			:shape="${(x, c) => getComponent(x, c).shape}"
-			:scale="${(x, c) => getComponent(x, c).scale}"
-			?disabled="${(x, c) => getComponent(x, c).disabled}"
-			@mousedown="${() => false}">
-		</${optionTagTag}>
-	`;
-};
-function renderFieldset(context) {
-	const buttonTag = context.tagFor(require_definition$2.Button);
-	const progressRingTag = context.tagFor(require_definition$1.ProgressRing);
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const chevronTemplate = require_definition$2.chevronTemplateFactory(context);
-	const tagTemplate = tagTemplateFactory(context, (c) => c.parent);
-	const nestedTagTemplate = tagTemplateFactory(context, (c) => c.parentContext.parent);
-	const elidedTagTemplate = elidedTagTemplateFactory(context, (x, _) => x);
-	const nestedElidedTagTemplate = elidedTagTemplateFactory(context, (_, c) => c.parent);
+function renderClearButton(context) {
+	const buttonTag = context.tagFor(require_definition$1.Button);
 	return _microsoft_fast_element.html`
-		<div
-			class="fieldset ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["has-highlighted-option", x._highlightedOptionIndex !== null])}"
-			@click="${(x, c) => x._onFieldsetClick(c.event)}"
-			${(0, _microsoft_fast_element.ref)("_anchor")}
-		>
-			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-			<div class="content-area" ${(0, _microsoft_fast_element.ref)("_contentArea")}>
-				${(0, _microsoft_fast_element.repeat)((x) => x._tagRows, _microsoft_fast_element.html`
-						<div class="tag-row">
-							${(0, _microsoft_fast_element.when)((_, c) => c.isFirst && c.parent._numElidedTags, nestedElidedTagTemplate)}
-							${(0, _microsoft_fast_element.repeat)((x) => x, nestedTagTemplate)}
-						</div>
-					`, { positioning: true })}
-				<div
-					class="tag-row ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["contains-only-input", x._tagRows.length > 0 && x._lastTagRow.length === 0])}"
-				>
-					${(0, _microsoft_fast_element.when)((x) => x._tagRows.length === 0 && x._numElidedTags, elidedTagTemplate)}
-					${(0, _microsoft_fast_element.repeat)((x) => x._lastTagRow, tagTemplate)}
-					<input
-						id="control"
-						class="control"
-						autocomplete="off"
-						${require_delegates_aria.delegateAria({
-		role: "combobox",
-		ariaAutoComplete: "list",
-		ariaHasPopup: "listbox",
-		ariaExpanded: (x) => x.open,
-		ariaControls: "listbox",
-		ariaDescribedBy: (x) => `${x._feedbackDescribedBy} ${x.multiple && x.maxSelected && x.maxSelected >= 1 ? "selection-count" : null}`
-	})}
-						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
-						type="text"
-						?disabled="${(x) => x.disabled}"
-						:value="${(x) => x._inputValue}"
-						@input="${(x, c) => {
-		x._onInputInput(c.event);
+		<${buttonTag}
+			aria-label="${(x) => x.locale.select.clearButtonLabel}"
+			aria-hidden="${(x) => x._isClearButtonFocused ? "false" : "true"}"
+			@click="${(x, c) => {
+		x._onClearButtonClick();
 		c.event.stopPropagation();
 	}}"
-						@change="${(_, c) => {
+			@mousedown="${() => false}"
+			@keydown="${(x, c) => {
+		/* v8 ignore next -- @preserve */
+		if (c.event.key === "Tab") x._onClearButtonBlur();
 		c.event.stopPropagation();
+		return true;
 	}}"
-						@focus="${(x, c) => x._onInputFocus(c.event)}"
-						@blur="${(x, c) => x._onInputBlur(c.event)}"
-						@keydown="${(x, c) => x._onInputKeydown(c.event)}"
-						${(0, _microsoft_fast_element.ref)("_input")}
-					/>
-				</div>
-			</div>
-			<slot name="meta"></slot>
-			${(0, _microsoft_fast_element.when)((x) => x._shouldShowClearButton, _microsoft_fast_element.html`<${buttonTag}
-					aria-label="${(x) => x.locale.searchableSelect.clearButtonLabel}"
-					@click="${(x) => x._onClearButtonClick()}"
-					@mousedown="${() => false}"
-					?disabled="${(x) => x.disabled}"
-					:shape="${(x) => x.shape}"
-					size="super-condensed"
-					icon="close-line"
-					appearance="ghost-light"
-					tabindex="0"
-				></${buttonTag}>`)}
-			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
-				${(0, _microsoft_fast_element.when)((x) => x.loading, _microsoft_fast_element.html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`)}
-				${(0, _microsoft_fast_element.when)((x) => !x.loading, chevronTemplate)}
-			</div>
-		</div>
+			@focusin="${(x, c) => {
+		c.event.stopPropagation();
+		x._onClearButtonFocus();
+	}}"
+			@focusout="${(x) => x._onClearButtonBlur()}"
+			?disabled="${(x) => x.disabled}"
+			:shape="${(x) => x.shape}"
+			size="super-condensed"
+			icon="close-line"
+			appearance="ghost-light"
+			class="clear-button"
+			tabindex="0"
+		></${buttonTag}>
 	`;
 }
-function setFixedDropdownVarWidth(x) {
-	return x.open && x.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+function selectValue(context) {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const chevronTemplate = require_definition$1.chevronTemplateFactory(context);
+	return _microsoft_fast_element.html` <div
+		class="control ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["has-activedescendant", Boolean(x._activeDescendant) && x.open], ["disabled", x.disabled], "connotation-accent", `appearance-${selectAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", [`shape-${x.shape}`, Boolean(x.shape)], ["has-meta", Boolean(x.metaSlottedContent?.length)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["shows-placeholder", Boolean(x.placeholder) && !x.value], [`size-${x.scale}`, Boolean(x.scale)])}"
+		${(0, _microsoft_fast_element.ref)("_anchor")}
+		id="control"
+		?disabled="${(x) => x.disabled}"
+	>
+		<div class="selected-value">
+			${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
+			<span class="text">${(x) => x.displayValue}</span>
+			<slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
+		</div>
+		${(0, _microsoft_fast_element.when)((x) => x._shouldShowClearButton, renderClearButton(context))}
+		${chevronTemplate}
+	</div>`;
 }
-function renderSelectAll(context) {
-	const optionTag = context.tagFor(require_definition$4.ListboxOption);
-	const dividerTag = context.tagFor(require_divider.Divider);
-	return _microsoft_fast_element.html`
-    <${optionTag}
-      data-select-all
-      tabindex="-1"
-      :text="${(x) => x._selectAllLabel}"
-      :selected="${(x) => x._isAllSelected}"
-      :_displayCheckmark="${() => true}"
-      ?disabled="${(x) => x._selectableOptions.length === 0}"
-      ${(0, _microsoft_fast_element.ref)("_selectAllOption")}>
-    </${optionTag}>
-		<${dividerTag} class="divider"></${dividerTag}>
-  `;
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
 }
+/** @param context - element definition context */
 function renderControl(context) {
-	const popupTag = context.tagFor(require_definition$3.Popup);
+	const popupTag = context.tagFor(require_definition$2.Popup);
 	return _microsoft_fast_element.html`
-		<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp && !x._hasSelectionCount}>
-			${(0, _microsoft_fast_element.when)((x) => x.label || x._hasSelectionCount, _microsoft_fast_element.html`
-					<div>
-						${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
-						${(0, _microsoft_fast_element.when)((x) => x._hasSelectionCount, renderSelectionCount())}
-					</div>
-				`)}
-			<slot name="contextual-help" ${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}></slot>
-		</div>
-		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
-			${(x) => x._changeDescription}
-		</span>
-		<div>
-			${renderFieldset(context)}
-			<div class="popup-wrapper">
-				<${popupTag}
+			<div class="label-wrapper" ?hidden=${(x) => !x._shouldShowLabelWrapper}>
+				${(0, _microsoft_fast_element.when)((x) => x.label, renderLabel())}
+				${(0, _microsoft_fast_element.when)((x) => x.multiple && x._shouldShowClearButton, renderClearButton(context))}
+				<slot name="contextual-help" ${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}></slot>
+			</div>
+			<div class="control-wrapper">
+				${(0, _microsoft_fast_element.when)((x) => !x.multiple, selectValue(context))}
+				<${popupTag} class="popup"
+					style="${setFixedDropdownVarWidth}"
+					?open="${(x) => x.collapsible ? x.open : true}"
 					:anchor="${(x) => x._anchor}"
-					:open="${(x) => x.open}"
-					class="popup"
 					placement="bottom-start"
-					style="${setFixedDropdownVarWidth}"
-					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}">
-					<div
-						class="listbox"
+					strategy="${(x) => x.fixedDropdown ? null : "absolute"}">
+					<div class="listbox"
+						id="${(x) => x.listboxId}"
 						role="listbox"
 						aria-multiselectable="${(x) => x.multiple}"
-						aria-required="${(x) => x.required}"
-						${(0, _microsoft_fast_element.ref)("_listbox")}
-						@click="${(x, c) => x._onListboxClick(c.event)}"
-						@mousedown="${() => false}"
-					>
-						${(0, _microsoft_fast_element.when)((x) => x.enableSelectAll && x.multiple && !x.maxSelected, renderSelectAll(context))}
+						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
+						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
+						?disabled="${(x) => x.disabled}"
+						?hidden="${(x) => x.collapsible ? !x.open : false}"
+						${(0, _microsoft_fast_element.ref)("listbox")}>
+						${(0, _microsoft_fast_element.when)((x) => x.placeholder, renderPlaceholder(context))}
 						<slot
 							${(0, _microsoft_fast_element.slotted)({
-		filter: ((n) => require_definition$4.isListboxOption(n) || require_definition$5.isOptgroup(n)),
+		filter: require_listbox.Listbox.slottedOptionFilter,
 		flatten: true,
-		property: "_slottedElements"
+		property: "slottedOptions"
 	})}>
 						</slot>
-						${(0, _microsoft_fast_element.when)((x) => x._filteredOptions.length === 0, _microsoft_fast_element.html`<div class="empty-message">
-								${(0, _microsoft_fast_element.when)((x) => x.loading, _microsoft_fast_element.html`<slot name="loading-options">
-										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
-									</slot>`)}
-								${(0, _microsoft_fast_element.when)((x) => !x.loading && x.searchText === "", _microsoft_fast_element.html`<slot name="no-options">
-										${(x) => x.locale.searchableSelect.noOptionsMessage}
-									</slot>`)}
-								${(0, _microsoft_fast_element.when)((x) => !x.loading && x.searchText !== "", _microsoft_fast_element.html`<slot name="no-matches">
-										${(x) => x.locale.searchableSelect.noMatchesMessage}
-									</slot>`)}
-							</div>`)}
-					</div>
+				 	</div>
 				</${popupTag}>
 			</div>
-		</div>
-	`;
+		`;
+}
+/** Ignore events that originate from feedback, e.g. a click on link */
+function ifNotFromFeedback(handler) {
+	return (x, c) => {
+		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
+			handler(x, c.event);
+			return;
+		}
+		return true;
+	};
+}
+/**
+* As `ifNotFromFeedback`, but forwards the handler's return value.
+*
+* FAST prevents an event's default action unless the binding returns exactly
+* `true`, so handlers that need to opt out of that — e.g. keydown, where
+* preventing the default action on Tab would trap focus on the select — must
+* have their result passed through rather than discarded.
+*/
+function ifNotFromFeedbackPreservingDefault(handler) {
+	return (x, c) => {
+		if (!c.event.composedPath().includes(x._feedbackWrapper)) return handler(x, c.event);
+		return true;
+	};
 }
-var SearchableSelectTemplate = (context) => {
-	const optionTagName = context.tagFor(OptionTag, true);
+var SelectTemplate = (context) => {
 	return _microsoft_fast_element.html`
 		<template
-			:_optionTagTagName="${() => optionTagName}"
-			@mousedown="${(x, c) => x._onMouseDown(c.event)}"
+			${require_host_semantics.applyHostSemantics({
+		role: "combobox",
+		ariaLabel: (x) => x.ariaLabel ?? x.label,
+		ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+		ariaExpanded: (x) => x.open,
+		ariaDisabled: (x) => x.disabled
+	})}
+			aria-controls="${(x) => x.listboxId}"
+			aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
+			aria-describedby="${(x) => x._feedbackDescribedBy}"
+			tabindex="${(x) => !x.disabled ? "0" : null}"
+			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"
+			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
+			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
+			@keydown="${ifNotFromFeedbackPreservingDefault((x, e) => {
+		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(e);
+		return x.keydownHandler(e);
+	})}"
+			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"
 		>
-			<div class="control-wrapper">
-				${renderControl(context)} ${(x) => x._getFeedbackTemplate(context)}
+			${renderControl(context)}
+			<div class="feedback-wrapper" ${(0, _microsoft_fast_element.ref)("_feedbackWrapper")}>
+				${(x) => x._getFeedbackTemplate(context)}
 			</div>
 		</template>
 	`;
 };
 //#endregion
-//#region src/lib/searchable-select/option-tag.template.ts
-function renderRemoveButton(iconTag) {
-	return _microsoft_fast_element.html`
-		<span
-			class="remove-button"
-			aria-label="${(x) => x.locale.searchableSelect.removeTagButtonLabel(x.label)}"
-			role="button"
-			tabindex="${(x) => x.disabled ? null : 0}"
-			@click="${(x) => x._onClickRemove()}"
-		>
-			<${iconTag} name="close-line"></${iconTag}>
-		</span>
-	`;
-}
-var optionTagTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
-	return _microsoft_fast_element.html`<span
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.disabled], ["removable", x.removable], [`shape-${x.shape}`, Boolean(x.shape)], [`connotation-${x.connotation}`, Boolean(x.connotation)], [`size-${x.scale}`, Boolean(x.scale)])}"
-		aria-disabled="${(x) => x.disabled}"
-	>
-		<slot name="icon" aria-hidden="true">
-			${(0, _microsoft_fast_element.when)((x) => x.hasIconPlaceholder, _microsoft_fast_element.html`<div class="icon-placeholder"></div>`)}
-		</slot>
-		${(0, _microsoft_fast_element.when)((x) => x.label, (x) => _microsoft_fast_element.html`<span class="label">${x.label}</span>`)}
-		${(0, _microsoft_fast_element.when)((x) => x.removable, renderRemoveButton(iconTag))}
-	</span>`;
-};
-//#endregion
-//#region src/lib/searchable-select/definition.ts
-var optionTagDefinition = require_vivid_element.defineVividComponent("option-tag", OptionTag, optionTagTemplate, [require_definition.iconDefinition], {
-	styles: [option_tag_default],
-	shadowOptions: { delegatesFocus: true }
-});
+//#region src/lib/select/definition.ts
 /** @internal */
-var searchableSelectDefinition = require_vivid_element.defineVividComponent("searchable-select", SearchableSelect, SearchableSelectTemplate, [
-	require_definition$2.buttonDefinition,
-	require_definition$3.popupDefinition,
+var selectDefinition = require_vivid_element.defineVividComponent("select", Select, SelectTemplate, [
+	require_definition$2.popupDefinition,
 	require_definition.iconDefinition,
-	optionTagDefinition,
-	require_definition$1.progressRingDefinition,
-	require_mixins.feedbackMessageDefinition,
-	require_definition$4.listboxOptionDefinition,
-	require_definition$5.optgroupDefinition,
-	require_definition$6.dividerDefinition
-], { styles: searchable_select_default });
+	require_definition$3.listboxOptionDefinition,
+	require_definition$4.optgroupDefinition,
+	require_definition$1.buttonDefinition,
+	require_feedback_message.feedbackMessageDefinition
+], { styles: select_default });
 /**
-* Registers the searchable-select element with the design system.
+* Registers the select elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSearchableSelect = require_vivid_element.createRegisterFunction(searchableSelectDefinition);
+var registerSelect = require_vivid_element.createRegisterFunction(selectDefinition);
 //#endregion
-Object.defineProperty(exports, "SearchableSelect", {
+Object.defineProperty(exports, "Select", {
 	enumerable: true,
 	get: function() {
-		return SearchableSelect;
+		return Select;
 	}
 });
-Object.defineProperty(exports, "registerSearchableSelect", {
+Object.defineProperty(exports, "registerSelect", {
 	enumerable: true,
 	get: function() {
-		return registerSearchableSelect;
+		return registerSelect;
 	}
 });
-Object.defineProperty(exports, "searchableSelectDefinition", {
+Object.defineProperty(exports, "selectDefinition", {
 	enumerable: true,
 	get: function() {
-		return searchableSelectDefinition;
+		return selectDefinition;
 	}
 });