@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition65.js

@@ -1,127 +1,1022 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { r as Connotation } from "./enums.js";
-import { r as Checkbox, t as checkboxDefinition } from "./definition23.js";
-import { r as Radio, t as radioDefinition } from "./definition58.js";
-import { attr, html, when } from "@microsoft/fast-element";
+import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as Localized } from "./localized.js";
+import { i as Button, r as chevronTemplateFactory, t as buttonDefinition } from "./definition6.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
+import { t as Divider } from "./divider.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { n as isListboxOption, t as ListboxOption } from "./option.js";
+import { t as listboxOptionDefinition } from "./definition29.js";
+import { n as isOptgroup } from "./optgroup.js";
+import { t as optgroupDefinition } from "./definition30.js";
+import { t as extractOptions } from "./extractOptions.js";
+import { t as dividerDefinition } from "./definition36.js";
+import { t as scrollIntoView } from "./scrollIntoView.js";
+import { Observable, Updates, attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/selectable-box/selectable-box.scss?inline
-var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+//#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);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/selectable-box/selectable-box.ts
+//#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}";
+//#endregion
+//#region src/lib/searchable-select/searchable-select.ts
+var TagGapPx = 8;
+var InputMinWidthPx = 100;
+var PageSize = 10;
+var isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
 /**
 * @public
-* @component selectable-box
-* @slot default - Slot for box's content.
-* @event {CustomEvent<undefined>} change - Fired when the checked state changes
-* @testAction check check #control
-* @testAction uncheck uncheck #control
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testRef control nestedShadow [data-vvd-component].control div.control
+* @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 when 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
+* @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 SelectableBox = class extends DelegatesAria(VividElement) {
+var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(FormElement(DelegatesAria(AffixIconWithTrailing(Localized(FormAssociated(VividElement))))))))) {
 	constructor(..._args) {
 		super(..._args);
-		this.checked = false;
-		this.clickableBox = false;
-		this.controlPlacement = "end-stacked";
-		this.tight = false;
-		this.disabled = false;
+		this.fixedDropdown = false;
+		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.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));
+			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;
+		}
+		return true;
+	}
+	/** @internal */
+	_slottedElementsChanged() {
+		this._slottedOptions = extractOptions(this._slottedElements);
+	}
+	/** @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) Observable.getNotifier(option).unsubscribe(this.#slottedOptionsChangeHandler, "selected");
+		}
+		/* v8 ignore else -- @preserve */
+		if (newValue) for (const option of newValue) {
+			option._displayCheckmark = true;
+			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);
+		}
+		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);
+		}
+	}
+	#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;
+		}
+		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);
+			}
+		}
+	}
+	/** @internal */
+	optionFilterChanged() {
+		this.#updateFilteredOptions();
+	}
+	/** @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 (isOptgroup(el)) {
+			const hasVisibleOption = Array.from(el.children).some((child) => isListboxOption(child) && !child._isNotMatching && !child.hidden);
+			el.style.display = hasVisibleOption ? "" : "none";
+		}
+		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;
+			scrollIntoView(highlightedOption, this._listbox, "nearest");
+			this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(highlightedOption._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, highlightedOption.selected);
+		}
+	}
+	#selectHighlightedOption() {
+		if (this._highlightedOptionIndex === null) return;
+		const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+		if (highlightedOption.getAttribute("data-select-all") !== null) {
+			this._toggleSelectAll();
+			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;
+	}
+	/** @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;
+	}
+	#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;
+		}
+		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;
+				}
+				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;
+			}
+		}
+		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 */
-	_handleCheckedChange() {
+	_onTagKeydown(event) {
+		const tagIndex = parseInt(event.target.dataset.index);
+		switch (event.key) {
+			case "Backspace":
+			case "Delete":
+			case "Enter":
+			case " ":
+				this._onTagRemoved(this.values[tagIndex]);
+				Updates.process();
+				this.#moveTagFocusTo(this.#nextTagIndexForRemoved(tagIndex));
+				break;
+			case "ArrowLeft":
+				this.#moveTagFocusTo(this.#nextTagIndexLeft(tagIndex) ?? tagIndex);
+				break;
+			case "ArrowRight":
+				this.#moveTagFocusTo(this.#nextTagIndexRight(tagIndex));
+				break;
+		}
+		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;
-		if (this.controlType === "radio" && this.checked) return;
-		this.checked = !this.checked;
-		if (this.clickableBox) this.$emit("change");
+		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();
+	}
+	#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;
+	}
+	/** @internal */
+	get _selectableOptions() {
+		return this._slottedOptions?.filter((o) => !this._slottedDisabledOptions.includes(o) && !o.disabled) ?? [];
 	}
 	/** @internal */
-	_handleKeydown(event) {
-		if (this.disabled) return true;
-		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
-			this._handleCheckedChange();
+	get _selectAllLabel() {
+		return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
+	}
+	/** @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));
+	}
+	/** @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;
 		}
+		const missingValues = selectableValues.filter((v) => !this.values.includes(v));
+		const updatedValues = [...this.values, ...missingValues];
+		this.#updateValuesThroughUserInteraction(updatedValues);
+		this._changeDescription = this.locale.searchableSelect.selectedAllMessage;
+	}
+	#determineInitialValues() {
+		return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
+	}
+	/** @internal */
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		this.#updateFormValue();
+	}
+	#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);
+		}
+	}
+	/** @internal */
+	formResetCallback() {
+		super.formResetCallback();
+		this.#updateValuesThroughUserInteraction(this.#determineInitialValues());
+	}
+	#resizeObserver;
+	/** @internal */
+	_onFieldsetClick(e) {
+		if (this.disabled) return;
+		if (!e.defaultPrevented) {
+			this._input.focus();
+			this.open = true;
+		}
+	}
+	/** @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);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("optgroup-change", this.#onOptgroupChange);
+		this.#resizeObserver.disconnect();
+	}
+	#onOptgroupChange;
+	/** @internal */
+	validate() {
+		super.validate(this._input ?? void 0);
+	}
+	/** @internal */
+	focus(options) {
+		this._input?.focus(options);
+	}
+	/** @internal */
+	_onMouseDown(event) {
+		const originalTarget = event.composedPath()[0];
+		if (!event.defaultPrevented && originalTarget !== this._input && !this._isFromContextualHelp(event)) {
+			this._input.focus();
+			return false;
+		}
 		return true;
 	}
 };
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
+__decorate([attr], SearchableSelect.prototype, "appearance", void 0);
+__decorate([attr], SearchableSelect.prototype, "shape", void 0);
+__decorate([attr()], SearchableSelect.prototype, "scale", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "fixed-dropdown"
+})], SearchableSelect.prototype, "fixedDropdown", void 0);
+__decorate([attr], SearchableSelect.prototype, "placeholder", void 0);
+__decorate([attr({ mode: "boolean" })], SearchableSelect.prototype, "open", void 0);
+__decorate([attr({ mode: "boolean" })], SearchableSelect.prototype, "multiple", void 0);
 __decorate([attr({
-	attribute: "clickable-box",
+	attribute: "external-tags",
 	mode: "boolean"
-})], SelectableBox.prototype, "clickableBox", void 0);
-__decorate([attr], SelectableBox.prototype, "connotation", void 0);
-__decorate([attr({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
+})], SearchableSelect.prototype, "externalTags", void 0);
+__decorate([attr({
+	attribute: "max-lines",
+	converter: nullableNumberConverter
+})], SearchableSelect.prototype, "maxLines", void 0);
+__decorate([observable], SearchableSelect.prototype, "values", void 0);
+__decorate([observable], SearchableSelect.prototype, "initialValues", void 0);
+__decorate([observable], SearchableSelect.prototype, "_input", void 0);
+__decorate([observable], SearchableSelect.prototype, "_currentSearchText", void 0);
+__decorate([observable], SearchableSelect.prototype, "_slottedElements", void 0);
+__decorate([observable], SearchableSelect.prototype, "_slottedOptions", void 0);
+__decorate([observable], SearchableSelect.prototype, "optionFilter", void 0);
+__decorate([observable], SearchableSelect.prototype, "_filteredOptions", void 0);
+__decorate([observable], SearchableSelect.prototype, "_filteredEnabledOptions", void 0);
+__decorate([attr({ mode: "boolean" })], SearchableSelect.prototype, "loading", void 0);
+__decorate([observable], SearchableSelect.prototype, "_highlightedOptionIndex", void 0);
+__decorate([observable], SearchableSelect.prototype, "_contentArea", void 0);
+__decorate([observable], SearchableSelect.prototype, "_numElidedTags", void 0);
+__decorate([observable], SearchableSelect.prototype, "_tagRows", void 0);
+__decorate([observable], SearchableSelect.prototype, "_lastTagRow", void 0);
+__decorate([observable], SearchableSelect.prototype, "_listbox", void 0);
+__decorate([attr({ mode: "boolean" })], SearchableSelect.prototype, "clearable", void 0);
+__decorate([attr({
+	attribute: "max-selected",
+	converter: nullableNumberConverter
+})], SearchableSelect.prototype, "maxSelected", void 0);
+__decorate([observable], SearchableSelect.prototype, "_slottedDisabledOptions", void 0);
 __decorate([attr({
-	attribute: "control-placement",
-	mode: "fromView"
-})], SelectableBox.prototype, "controlPlacement", void 0);
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
+	attribute: "enable-select-all",
+	mode: "boolean"
+})], SearchableSelect.prototype, "enableSelectAll", void 0);
+__decorate([attr({ attribute: "select-all-text" })], SearchableSelect.prototype, "selectAllText", void 0);
+__decorate([attr({ attribute: "deselect-all-text" })], SearchableSelect.prototype, "deselectAllText", void 0);
+__decorate([observable], SearchableSelect.prototype, "_selectAllOption", void 0);
+__decorate([observable], SearchableSelect.prototype, "_changeDescription", void 0);
+__decorate([observable], SearchableSelect.prototype, "_anchor", void 0);
 //#endregion
-//#region src/lib/selectable-box/selectable-box.template.ts
-function handleControlChange(x) {
-	if (!x.clickableBox) x._handleCheckedChange();
-}
-function checkbox(context) {
-	const checkboxTag = context.tagFor(Checkbox);
-	return html`${when((x) => x.controlType !== "radio", html`
-		<${checkboxTag}
-			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${checkboxTag}>`)} `;
+//#region src/lib/searchable-select/option-tag.ts
+var OptionTag = class extends Localized(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.removable = false;
+		this.disabled = false;
+		this.hasIconPlaceholder = false;
+	}
+	/** @internal */
+	_onClickRemove() {
+		this.$emit("remove", void 0, { bubbles: false });
+	}
+};
+__decorate([attr], OptionTag.prototype, "shape", void 0);
+__decorate([observable], OptionTag.prototype, "connotation", void 0);
+__decorate([attr], OptionTag.prototype, "label", void 0);
+__decorate([attr({ mode: "boolean" })], OptionTag.prototype, "removable", void 0);
+__decorate([attr({ mode: "boolean" })], OptionTag.prototype, "disabled", void 0);
+__decorate([observable], OptionTag.prototype, "hasIconPlaceholder", void 0);
+__decorate([attr()], OptionTag.prototype, "scale", void 0);
+//#endregion
+//#region src/lib/searchable-select/searchable-select.template.ts
+function renderLabel() {
+	return html`
+		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
+	`;
 }
-function radio(context) {
-	const radioTag = context.tagFor(Radio);
-	return html`${when((x) => x.controlType === "radio", html`
-		<${radioTag}
-			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control radio ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${radioTag}>`)} `;
+function renderSelectionCount() {
+	return 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
+		>
+	`;
 }
-var SelectableBoxTemplate = (context) => {
-	return html`<template>
+var tagTemplateFactory = (context, getComponent) => {
+	const optionTagTag = context.tagFor(OptionTag);
+	return 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 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(Button);
+	const progressRingTag = context.tagFor(ProgressRing);
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	const chevronTemplate = 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);
+	return html`
 		<div
-			class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["tight", x.tight], ["selected", x.checked], ["clickable", x.clickableBox], ["readonly", !x.clickableBox], [`control-placement-${x.controlPlacement}`, Boolean(x.controlPlacement)], ["disabled", x.disabled])}"
-			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
-			${delegateAria({
-		role: (x) => x.clickableBox ? "button" : null,
-		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
-		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
-		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
-	})}
-			@keydown="${(x, c) => x._handleKeydown(c.event)}"
-			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
+			class="fieldset ${(x) => 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)}"
+			${ref("_anchor")}
 		>
-			${checkbox(context)} ${radio(context)}
-			<slot></slot>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<div class="content-area" ${ref("_contentArea")}>
+				${repeat((x) => x._tagRows, html`
+						<div class="tag-row">
+							${when((_, c) => c.isFirst && c.parent._numElidedTags, nestedElidedTagTemplate)}
+							${repeat((x) => x, nestedTagTemplate)}
+						</div>
+					`, { positioning: true })}
+				<div
+					class="tag-row ${(x) => classNames(["contains-only-input", x._tagRows.length > 0 && x._lastTagRow.length === 0])}"
+				>
+					${when((x) => x._tagRows.length === 0 && x._numElidedTags, elidedTagTemplate)}
+					${repeat((x) => x._lastTagRow, tagTemplate)}
+					<input
+						id="control"
+						class="control"
+						autocomplete="off"
+						${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);
+		c.event.stopPropagation();
+	}}"
+						@change="${(_, c) => {
+		c.event.stopPropagation();
+	}}"
+						@focus="${(x, c) => x._onInputFocus(c.event)}"
+						@blur="${(x, c) => x._onInputBlur(c.event)}"
+						@keydown="${(x, c) => x._onInputKeydown(c.event)}"
+						${ref("_input")}
+					/>
+				</div>
+			</div>
+			<slot name="meta"></slot>
+			${when((x) => x._shouldShowClearButton, 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()}">
+				${when((x) => x.loading, html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`)}
+				${when((x) => !x.loading, chevronTemplate)}
+			</div>
 		</div>
-	</template>`;
+	`;
+}
+function setFixedDropdownVarWidth(x) {
+	return x.open && x.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+}
+function renderSelectAll(context) {
+	const optionTag = context.tagFor(ListboxOption);
+	const dividerTag = context.tagFor(Divider);
+	return html`
+    <${optionTag}
+      data-select-all
+      tabindex="-1"
+      :text="${(x) => x._selectAllLabel}"
+      :selected="${(x) => x._isAllSelected}"
+      :_displayCheckmark="${() => true}"
+      ?disabled="${(x) => x._selectableOptions.length === 0}"
+      ${ref("_selectAllOption")}>
+    </${optionTag}>
+		<${dividerTag} class="divider"></${dividerTag}>
+  `;
+}
+function renderControl(context) {
+	const popupTag = context.tagFor(Popup);
+	return html`
+		<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp && !x._hasSelectionCount}>
+			${when((x) => x.label || x._hasSelectionCount, html`
+					<div>
+						${when((x) => x.label, renderLabel())}
+						${when((x) => x._hasSelectionCount, renderSelectionCount())}
+					</div>
+				`)}
+			<slot name="contextual-help" ${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}
+					:anchor="${(x) => x._anchor}"
+					:open="${(x) => x.open}"
+					class="popup"
+					placement="bottom-start"
+					style="${setFixedDropdownVarWidth}"
+					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}">
+					<div
+						class="listbox"
+						role="listbox"
+						aria-multiselectable="${(x) => x.multiple}"
+						aria-required="${(x) => x.required}"
+						${ref("_listbox")}
+						@click="${(x, c) => x._onListboxClick(c.event)}"
+						@mousedown="${() => false}"
+					>
+						${when((x) => x.enableSelectAll && x.multiple && !x.maxSelected, renderSelectAll(context))}
+						<slot
+							${slotted({
+		filter: ((n) => isListboxOption(n) || isOptgroup(n)),
+		flatten: true,
+		property: "_slottedElements"
+	})}>
+						</slot>
+						${when((x) => x._filteredOptions.length === 0, html`<div class="empty-message">
+								${when((x) => x.loading, html`<slot name="loading-options">
+										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
+									</slot>`)}
+								${when((x) => !x.loading && x.searchText === "", html`<slot name="no-options">
+										${(x) => x.locale.searchableSelect.noOptionsMessage}
+									</slot>`)}
+								${when((x) => !x.loading && x.searchText !== "", html`<slot name="no-matches">
+										${(x) => x.locale.searchableSelect.noMatchesMessage}
+									</slot>`)}
+							</div>`)}
+					</div>
+				</${popupTag}>
+			</div>
+		</div>
+	`;
+}
+var SearchableSelectTemplate = (context) => {
+	const optionTagName = context.tagFor(OptionTag, true);
+	return html`
+		<template
+			:_optionTagTagName="${() => optionTagName}"
+			@mousedown="${(x, c) => x._onMouseDown(c.event)}"
+		>
+			<div class="control-wrapper">
+				${renderControl(context)} ${(x) => x._getFeedbackTemplate(context)}
+			</div>
+		</template>
+	`;
 };
 //#endregion
-//#region src/lib/selectable-box/definition.ts
+//#region src/lib/searchable-select/option-tag.template.ts
+function renderRemoveButton(iconTag) {
+	return 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(Icon);
+	return html`<span
+		class="${(x) => 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">
+			${when((x) => x.hasIconPlaceholder, html`<div class="icon-placeholder"></div>`)}
+		</slot>
+		${when((x) => x.label, (x) => html`<span class="label">${x.label}</span>`)}
+		${when((x) => x.removable, renderRemoveButton(iconTag))}
+	</span>`;
+};
 /** @internal */
-var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
-	styles: selectable_box_default,
-	shadowOptions: { delegatesFocus: true }
-});
+var searchableSelectDefinition = defineVividComponent("searchable-select", SearchableSelect, SearchableSelectTemplate, [
+	buttonDefinition,
+	popupDefinition,
+	iconDefinition,
+	defineVividComponent("option-tag", OptionTag, optionTagTemplate, [iconDefinition], {
+		styles: [option_tag_default],
+		shadowOptions: { delegatesFocus: true }
+	}),
+	progressRingDefinition,
+	feedbackMessageDefinition,
+	listboxOptionDefinition,
+	optgroupDefinition,
+	dividerDefinition
+], { styles: searchable_select_default });
 /**
-* Registers the selectable-box element with the design system.
+* Registers the searchable-select element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSelectableBox = createRegisterFunction(selectableBoxDefinition);
+var registerSearchableSelect = createRegisterFunction(searchableSelectDefinition);
 //#endregion
-export { selectableBoxDefinition as n, SelectableBox as r, registerSelectableBox as t };
+export { searchableSelectDefinition as n, SearchableSelect as r, registerSearchableSelect as t };