@eagami/ui 5.56.0 → 5.57.0

package/fesm2022/eagami-ui.mjs

@@ -481,7 +481,13 @@ const ar = {
 		},
 		dialog: { close: "إغلاق مربع الحوار" },
 		drawer: { close: "إغلاق اللوحة" },
-		dropdown: { placeholder: "اختر…" },
+		dropdown: {
+			placeholder: "اختر…",
+			clear: "مسح التحديد",
+			dialogLabel: "اختيار خيار",
+			searchPlaceholder: "بحث…",
+			searchEmpty: "لا توجد مطابقات"
+		},
 		fieldLabel: { help: (label) => `مزيد من المعلومات حول ${label}` },
 		fileUploader: {
 			prompt: "انقر أو اسحب الملفات هنا للتحميل",
@@ -691,7 +697,13 @@ const de = {
 		},
 		dialog: { close: "Dialog schließen" },
 		drawer: { close: "Panel schließen" },
-		dropdown: { placeholder: "Auswählen…" },
+		dropdown: {
+			placeholder: "Auswählen…",
+			clear: "Auswahl aufheben",
+			dialogLabel: "Option wählen",
+			searchPlaceholder: "Suchen…",
+			searchEmpty: "Keine Treffer"
+		},
 		fieldLabel: { help: (label) => `Weitere Informationen zu ${label}` },
 		fileUploader: {
 			prompt: "Dateien hierher klicken oder ziehen zum Hochladen",
@@ -901,7 +913,13 @@ const el = {
 		},
 		dialog: { close: "Κλείσιμο παραθύρου διαλόγου" },
 		drawer: { close: "Κλείσιμο πίνακα" },
-		dropdown: { placeholder: "Επιλέξτε…" },
+		dropdown: {
+			placeholder: "Επιλέξτε…",
+			clear: "Εκκαθάριση επιλογής",
+			dialogLabel: "Επιλέξτε μια επιλογή",
+			searchPlaceholder: "Αναζήτηση…",
+			searchEmpty: "Δεν βρέθηκαν αποτελέσματα"
+		},
 		fieldLabel: { help: (label) => `Περισσότερες πληροφορίες: ${label}` },
 		fileUploader: {
 			prompt: "Κάντε κλικ ή σύρετε αρχεία εδώ για μεταφόρτωση",
@@ -1111,7 +1129,13 @@ const en = {
 		},
 		dialog: { close: "Close dialog" },
 		drawer: { close: "Close panel" },
-		dropdown: { placeholder: "Select…" },
+		dropdown: {
+			placeholder: "Select…",
+			clear: "Clear selection",
+			dialogLabel: "Choose an option",
+			searchPlaceholder: "Search…",
+			searchEmpty: "No matches"
+		},
 		fieldLabel: { help: (label) => `More information about ${label}` },
 		fileUploader: {
 			prompt: "Click or drag files here to upload",
@@ -1321,7 +1345,13 @@ const esES = {
 		},
 		dialog: { close: "Cerrar diálogo" },
 		drawer: { close: "Cerrar panel" },
-		dropdown: { placeholder: "Seleccionar…" },
+		dropdown: {
+			placeholder: "Seleccionar…",
+			clear: "Borrar selección",
+			dialogLabel: "Elegir una opción",
+			searchPlaceholder: "Buscar…",
+			searchEmpty: "Sin coincidencias"
+		},
 		fieldLabel: { help: (label) => `Más información sobre ${label}` },
 		fileUploader: {
 			prompt: "Haz clic o arrastra archivos aquí para subirlos",
@@ -1531,7 +1561,13 @@ const frFR = {
 		},
 		dialog: { close: "Fermer la boîte de dialogue" },
 		drawer: { close: "Fermer le panneau" },
-		dropdown: { placeholder: "Sélectionner…" },
+		dropdown: {
+			placeholder: "Sélectionner…",
+			clear: "Effacer la sélection",
+			dialogLabel: "Choisir une option",
+			searchPlaceholder: "Rechercher…",
+			searchEmpty: "Aucun résultat"
+		},
 		fieldLabel: { help: (label) => `Plus d’informations sur ${label}` },
 		fileUploader: {
 			prompt: "Cliquez ou glissez des fichiers ici pour les téléverser",
@@ -1741,7 +1777,13 @@ const he = {
 		},
 		dialog: { close: "סגירת חלון" },
 		drawer: { close: "סגירת לוח" },
-		dropdown: { placeholder: "בחר…" },
+		dropdown: {
+			placeholder: "בחר…",
+			clear: "ניקוי הבחירה",
+			dialogLabel: "בחירת אפשרות",
+			searchPlaceholder: "חיפוש…",
+			searchEmpty: "אין התאמות"
+		},
 		fieldLabel: { help: (label) => `מידע נוסף על ${label}` },
 		fileUploader: {
 			prompt: "לחץ או גרור קבצים לכאן להעלאה",
@@ -1951,7 +1993,13 @@ const hi = {
 		},
 		dialog: { close: "संवाद बंद करें" },
 		drawer: { close: "पैनल बंद करें" },
-		dropdown: { placeholder: "चुनें…" },
+		dropdown: {
+			placeholder: "चुनें…",
+			clear: "चयन साफ़ करें",
+			dialogLabel: "एक विकल्प चुनें",
+			searchPlaceholder: "खोजें…",
+			searchEmpty: "कोई मिलान नहीं"
+		},
 		fieldLabel: { help: (label) => `अधिक जानकारी: ${label}` },
 		fileUploader: {
 			prompt: "अपलोड करने के लिए फ़ाइलें यहाँ क्लिक करें या खींचें",
@@ -2161,7 +2209,13 @@ const is = {
 		},
 		dialog: { close: "Loka glugga" },
 		drawer: { close: "Loka spjaldi" },
-		dropdown: { placeholder: "Veldu…" },
+		dropdown: {
+			placeholder: "Veldu…",
+			clear: "Hreinsa val",
+			dialogLabel: "Velja valkost",
+			searchPlaceholder: "Leita…",
+			searchEmpty: "Engin samsvörun"
+		},
 		fieldLabel: { help: (label) => `Nánari upplýsingar: ${label}` },
 		fileUploader: {
 			prompt: "Smelltu eða dragðu skrár hingað til að hlaða upp",
@@ -2371,7 +2425,13 @@ const nl = {
 		},
 		dialog: { close: "Dialoogvenster sluiten" },
 		drawer: { close: "Paneel sluiten" },
-		dropdown: { placeholder: "Selecteer…" },
+		dropdown: {
+			placeholder: "Selecteer…",
+			clear: "Selectie wissen",
+			dialogLabel: "Optie kiezen",
+			searchPlaceholder: "Zoeken…",
+			searchEmpty: "Geen overeenkomsten"
+		},
 		fieldLabel: { help: (label) => `Meer informatie over ${label}` },
 		fileUploader: {
 			prompt: "Klik of sleep bestanden hierheen om te uploaden",
@@ -2581,7 +2641,13 @@ const pl = {
 		},
 		dialog: { close: "Zamknij okno dialogowe" },
 		drawer: { close: "Zamknij panel" },
-		dropdown: { placeholder: "Wybierz…" },
+		dropdown: {
+			placeholder: "Wybierz…",
+			clear: "Wyczyść wybór",
+			dialogLabel: "Wybierz opcję",
+			searchPlaceholder: "Szukaj…",
+			searchEmpty: "Brak wyników"
+		},
 		fieldLabel: { help: (label) => `Więcej informacji: ${label}` },
 		fileUploader: {
 			prompt: "Kliknij lub przeciągnij pliki tutaj, aby je przesłać",
@@ -2791,7 +2857,13 @@ const ptBR = {
 		},
 		dialog: { close: "Fechar diálogo" },
 		drawer: { close: "Fechar painel" },
-		dropdown: { placeholder: "Selecione…" },
+		dropdown: {
+			placeholder: "Selecione…",
+			clear: "Limpar seleção",
+			dialogLabel: "Escolher uma opção",
+			searchPlaceholder: "Pesquisar…",
+			searchEmpty: "Nenhuma correspondência"
+		},
 		fieldLabel: { help: (label) => `Mais informações sobre ${label}` },
 		fileUploader: {
 			prompt: "Clique ou arraste arquivos aqui para enviar",
@@ -3001,7 +3073,13 @@ const ru = {
 		},
 		dialog: { close: "Закрыть диалог" },
 		drawer: { close: "Закрыть панель" },
-		dropdown: { placeholder: "Выберите…" },
+		dropdown: {
+			placeholder: "Выберите…",
+			clear: "Очистить выбор",
+			dialogLabel: "Выбор варианта",
+			searchPlaceholder: "Поиск…",
+			searchEmpty: "Нет совпадений"
+		},
 		fieldLabel: { help: (label) => `Подробнее: ${label}` },
 		fileUploader: {
 			prompt: "Нажмите или перетащите файлы сюда для загрузки",
@@ -3211,7 +3289,13 @@ const uk = {
 		},
 		dialog: { close: "Закрити діалог" },
 		drawer: { close: "Закрити панель" },
-		dropdown: { placeholder: "Виберіть…" },
+		dropdown: {
+			placeholder: "Виберіть…",
+			clear: "Очистити вибір",
+			dialogLabel: "Виберіть варіант",
+			searchPlaceholder: "Пошук…",
+			searchEmpty: "Немає збігів"
+		},
 		fieldLabel: { help: (label) => `Докладніше: ${label}` },
 		fileUploader: {
 			prompt: "Натисніть або перетягніть файли сюди для завантаження",
@@ -3421,7 +3505,13 @@ const zhCN = {
 		},
 		dialog: { close: "关闭对话框" },
 		drawer: { close: "关闭面板" },
-		dropdown: { placeholder: "请选择…" },
+		dropdown: {
+			placeholder: "请选择…",
+			clear: "清除选择",
+			dialogLabel: "选择一个选项",
+			searchPlaceholder: "搜索…",
+			searchEmpty: "无匹配项"
+		},
 		fieldLabel: { help: (label) => `关于 ${label} 的更多信息` },
 		fileUploader: {
 			prompt: "点击或拖动文件到此处上传",
@@ -7221,12 +7311,14 @@ var TooltipDirective = class TooltipDirective {
 	flip = input(true, ...ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []);
 	whenClipped = input(false, ...ngDevMode ? [{ debugName: "whenClipped" }] : /* istanbul ignore next */ []);
 	maxWidth = input(200, ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
+	showDelay = input(0, ...ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []);
 	dismissDelay = input(150, ...ngDevMode ? [{ debugName: "dismissDelay" }] : /* istanbul ignore next */ []);
 	tooltipOpen = input(null, ...ngDevMode ? [{ debugName: "tooltipOpen" }] : /* istanbul ignore next */ []);
 	tooltipEl = null;
 	placedPosition = "top";
 	templateView = null;
 	scrollable = false;
+	showTimer = null;
 	hideTimer = null;
 	pointerInside = false;
 	tooltipId = `ea-tooltip-${Math.random().toString(36).slice(2, 9)}`;
@@ -7234,7 +7326,7 @@ var TooltipDirective = class TooltipDirective {
 	showHandler = () => {
 		if (this.controlled()) return;
 		this.pointerInside = true;
-		this.show();
+		this.requestShow();
 	};
 	pointerLeaveHandler = () => {
 		if (this.controlled()) return;
@@ -7250,7 +7342,7 @@ var TooltipDirective = class TooltipDirective {
 	focusHandler = (event) => {
 		if (this.controlled()) return;
 		const target = event.target;
-		if (!this.supportsFocusVisible || target.matches(":focus-visible")) this.show();
+		if (!this.supportsFocusVisible || target.matches(":focus-visible")) this.requestShow();
 	};
 	keydownHandler = (event) => {
 		if (event.key === "Escape" && this.tooltipEl) this.hide();
@@ -7310,7 +7402,26 @@ var TooltipDirective = class TooltipDirective {
 			this.hide();
 		}
 	}
+	requestShow() {
+		const delay = this.showDelay();
+		if (delay <= 0 || this.tooltipEl) {
+			this.show();
+			return;
+		}
+		if (this.showTimer !== null) return;
+		this.showTimer = setTimeout(() => {
+			this.showTimer = null;
+			this.show();
+		}, delay);
+	}
+	cancelPendingShow() {
+		if (this.showTimer !== null) {
+			clearTimeout(this.showTimer);
+			this.showTimer = null;
+		}
+	}
 	show() {
+		this.cancelPendingShow();
 		if (this.tooltipEl) {
 			this.cancelPendingHide();
 			return;
@@ -7378,6 +7489,7 @@ var TooltipDirective = class TooltipDirective {
 		}
 	}
 	hide() {
+		this.cancelPendingShow();
 		this.cancelPendingHide();
 		this.detachRepositionListeners();
 		if (this.rafId !== null) {
@@ -7547,6 +7659,13 @@ var TooltipDirective = class TooltipDirective {
 				isRequired: false,
 				transformFunction: null
 			},
+			showDelay: {
+				classPropertyName: "showDelay",
+				publicName: "showDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			dismissDelay: {
 				classPropertyName: "dismissDelay",
 				publicName: "dismissDelay",
@@ -7616,6 +7735,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDelay",
+				required: false
+			}]
+		}],
 		dismissDelay: [{
 			type: i0.Input,
 			args: [{
@@ -8326,6 +8453,7 @@ var AvatarEditorComponent = class AvatarEditorComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -9580,6 +9708,7 @@ var BarChartComponent = class BarChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]
@@ -10945,6 +11074,7 @@ var CheckboxComponent = class CheckboxComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -17745,9 +17875,23 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const LIST_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End",
+	"Enter",
+	"Escape"
+]);
+function isTypedCharacter(event) {
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
 var DropdownComponent = class DropdownComponent {
 	elRef = viewChild("triggerEl", ...ngDevMode ? [{ debugName: "elRef" }] : /* istanbul ignore next */ []);
+	popover = viewChild(PopoverComponent, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+	searchEl = viewChild("searchEl", ...ngDevMode ? [{ debugName: "searchEl" }] : /* istanbul ignore next */ []);
 	i18n = inject(EagamiI18nService);
+	injector = inject(Injector);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []);
 	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : /* istanbul ignore next */ []);
@@ -17757,6 +17901,8 @@ var DropdownComponent = class DropdownComponent {
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	clearable = input(false, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
+	searchable = input(false, ...ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
@@ -17765,6 +17911,7 @@ var DropdownComponent = class DropdownComponent {
 	changed = output();
 	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	focusedIndex = signal(-1, ...ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []);
+	searchTerm = signal("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
 	_formDisabled = signal(false, ...ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []);
 	typeaheadQuery = "";
 	typeaheadTimer;
@@ -17772,6 +17919,9 @@ var DropdownComponent = class DropdownComponent {
 	onTouched = () => {};
 	constructor() {
 		inject(DestroyRef).onDestroy(() => clearTimeout(this.typeaheadTimer));
+		afterRenderEffect(() => {
+			if (this.searchable() && this.popover()?.isPositioned()) untracked(() => this.searchEl()?.nativeElement.focus());
+		});
 	}
 	isDisabled = computed(() => this.disabled() || this._formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	errorState = injectControlErrorState({
@@ -17785,19 +17935,29 @@ var DropdownComponent = class DropdownComponent {
 	optionGroups = computed(() => toGroups(this.options()), ...ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []);
 	grouped = computed(() => isGrouped(this.options()), ...ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []);
 	flatOptions = computed(() => flattenGroups(this.optionGroups()), ...ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []);
-	renderedGroups = computed(() => toRenderedGroups(this.optionGroups()), ...ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []);
-	selectedIndex = computed(() => this.flatOptions().findIndex((o) => o.value === this.value()), ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	filteredGroups = computed(() => {
+		const term = foldForSearch(this.searchTerm().trim());
+		const groups = this.optionGroups();
+		return term ? filterGroups(groups, (o) => foldForSearch(o.label).includes(term)) : groups;
+	}, ...ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []);
+	filteredOptions = computed(() => flattenGroups(this.filteredGroups()), ...ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []);
+	renderedGroups = computed(() => toRenderedGroups(this.filteredGroups()), ...ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []);
+	selectedIndex = computed(() => this.filteredOptions().findIndex((o) => o.value === this.value()), ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
 	selectedLabel = computed(() => {
 		return this.flatOptions().find((o) => o.value === this.value())?.label ?? "";
 	}, ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
 	resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().dropdown.placeholder, ...ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []);
 	triggerLabelledBy = computed(() => this.label() ? `${this.id()}-label ${this.id()}` : null, ...ngDevMode ? [{ debugName: "triggerLabelledBy" }] : /* istanbul ignore next */ []);
+	showClear = computed(() => this.clearable() && this.value() !== "" && !this.isDisabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
+	listboxId = computed(() => `${this.id()}-listbox`, ...ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []);
+	activeOptionId = computed(() => this.isOpen() && this.focusedIndex() >= 0 ? `${this.id()}-option-${this.focusedIndex()}` : null, ...ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []);
 	triggerClasses = computed(() => ({
 		[`ea-dropdown__trigger--${this.size()}`]: true,
 		"ea-dropdown__trigger--error": this.hasError(),
 		"ea-dropdown__trigger--open": this.isOpen(),
 		"ea-dropdown__trigger--disabled": this.isDisabled(),
-		"ea-dropdown__trigger--readonly": this.readonly() && !this.isDisabled()
+		"ea-dropdown__trigger--readonly": this.readonly() && !this.isDisabled(),
+		"ea-dropdown__trigger--clearable": this.showClear()
 	}), ...ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []);
 	menuClasses = computed(() => ({ [`ea-dropdown__menu--${this.size()}`]: true }), ...ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []);
 	writeValue(val) {
@@ -17814,26 +17974,34 @@ var DropdownComponent = class DropdownComponent {
 	}
 	toggle() {
 		if (this.isDisabled() || this.readonly()) return;
-		this.isOpen.set(!this.isOpen());
 		if (this.isOpen()) {
-			const selected = this.flatOptions().findIndex((o) => o.value === this.value());
-			if (selected >= 0) this.focusedIndex.set(selected);
-			else this.focusEdge(1);
+			this.close();
+			return;
 		}
+		this.isOpen.set(true);
+		const selected = this.selectedIndex();
+		if (selected >= 0) this.focusedIndex.set(selected);
+		else this.focusEdge(1);
 	}
 	select(option) {
 		if (option.disabled || this.isDisabled() || this.readonly()) return;
-		this.value.set(option.value);
-		this.onChange(option.value);
-		this.onTouched();
-		this.changed.emit(option.value);
+		this.commit(option.value);
 		this.close();
 	}
 	close() {
+		const searchEl = this.searchEl()?.nativeElement;
+		const searching = !!searchEl && document.activeElement === searchEl;
 		this.isOpen.set(false);
 		this.focusedIndex.set(-1);
+		this.searchTerm.set("");
 		this.typeaheadQuery = "";
 		clearTimeout(this.typeaheadTimer);
+		if (searching) this.focus();
+	}
+	clear() {
+		this.close();
+		this.commit("");
+		this.focus();
 	}
 	focus() {
 		this.elRef()?.nativeElement.focus();
@@ -17878,36 +18046,69 @@ var DropdownComponent = class DropdownComponent {
 				if (!this.isOpen()) this.toggle();
 				this.focusEdge(-1);
 				break;
-			default: this.handleTypeahead(event);
+			default: if (this.searchable()) this.startSearch(event);
+			else this.handleTypeahead(event);
 		}
 	}
+	onSearchInput(term) {
+		this.searchTerm.set(term);
+		this.focusFirstMatch();
+	}
+	handleSearchKeydown(event) {
+		if (event.key === "Tab") this.close();
+		else if (LIST_KEYS.has(event.key)) this.handleKeydown(event);
+	}
+	onMenuMousedown(event) {
+		if (this.searchable() && event.target !== this.searchEl()?.nativeElement) event.preventDefault();
+	}
+	commit(value) {
+		this.value.set(value);
+		this.onChange(value);
+		this.onTouched();
+		this.changed.emit(value);
+	}
+	startSearch(event) {
+		if (!isTypedCharacter(event)) return;
+		event.preventDefault();
+		this.isOpen.set(true);
+		this.searchTerm.update((term) => term + event.key);
+		this.focusFirstMatch();
+	}
+	focusFirstMatch() {
+		const first = this.filteredOptions().findIndex((o) => !o.disabled);
+		this.focusedIndex.set(first);
+		afterNextRender(() => this.scrollOptionIntoView(first), { injector: this.injector });
+	}
 	selectFocusedOrOpen(event) {
 		event.preventDefault();
 		if (this.isOpen()) {
-			const opts = this.flatOptions();
+			const opts = this.filteredOptions();
 			const idx = this.focusedIndex();
 			if (idx >= 0 && idx < opts.length && !opts[idx].disabled) this.select(opts[idx]);
 		} else this.toggle();
 	}
 	focusEdge(direction) {
-		const opts = this.flatOptions();
+		const opts = this.filteredOptions();
 		let idx = direction === 1 ? 0 : opts.length - 1;
 		while (idx >= 0 && idx < opts.length && opts[idx].disabled) idx += direction;
 		if (idx >= 0 && idx < opts.length) this.setFocusedIndex(idx);
 	}
 	setFocusedIndex(idx) {
 		this.focusedIndex.set(idx);
+		this.scrollOptionIntoView(idx);
+	}
+	scrollOptionIntoView(idx) {
 		document.getElementById(`${this.id()}-option-${idx}`)?.scrollIntoView({ block: "nearest" });
 	}
 	handleTypeahead(event) {
-		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		if (!isTypedCharacter(event)) return;
 		event.preventDefault();
 		if (this.typeaheadTimer !== void 0) clearTimeout(this.typeaheadTimer);
 		this.typeaheadTimer = setTimeout(() => this.typeaheadQuery = "", 500);
 		this.typeaheadQuery += foldForSearch(event.key);
 		const wasOpen = this.isOpen();
 		if (!wasOpen) this.toggle();
-		const opts = this.flatOptions();
+		const opts = this.filteredOptions();
 		if (opts.length === 0) return;
 		const start = Math.max(this.focusedIndex(), 0);
 		const firstOffset = this.typeaheadQuery.length > 1 || !wasOpen ? 0 : 1;
@@ -17921,7 +18122,7 @@ var DropdownComponent = class DropdownComponent {
 		}
 	}
 	moveFocus(delta) {
-		const opts = this.flatOptions();
+		const opts = this.filteredOptions();
 		let idx = this.focusedIndex() + delta;
 		while (idx >= 0 && idx < opts.length && opts[idx].disabled) idx += delta;
 		if (idx >= 0 && idx < opts.length) this.setFocusedIndex(idx);
@@ -18004,6 +18205,20 @@ var DropdownComponent = class DropdownComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchable: {
+				classPropertyName: "searchable",
+				publicName: "searchable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -18049,16 +18264,32 @@ var DropdownComponent = class DropdownComponent {
 			useExisting: forwardRef(() => DropdownComponent),
 			multi: true
 		}],
-		viewQueries: [{
-			propertyName: "elRef",
-			first: true,
-			predicate: ["triggerEl"],
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "elRef",
+				first: true,
+				predicate: ["triggerEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "popover",
+				first: true,
+				predicate: PopoverComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "searchEl",
+				first: true,
+				predicate: ["searchEl"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-		styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:.25em 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
+		template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n      [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-dropdown__clear\"\n        [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n        (click)=\"clear()\">\n        <ea-icon-x aria-hidden=\"true\" />\n      </button>\n    }\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [role]=\"searchable() ? 'dialog' : 'listbox'\"\n      [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n      [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\"\n        (mousedown)=\"onMenuMousedown($event)\">\n        @if (searchable()) {\n          <div class=\"ea-dropdown__search\">\n            <ea-icon-search\n              class=\"ea-dropdown__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-dropdown__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput(searchEl.value)\"\n              (keydown)=\"handleSearchKeydown($event)\" />\n          </div>\n        }\n        <div\n          class=\"ea-dropdown__list\"\n          [attr.id]=\"searchable() ? listboxId() : null\"\n          [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n          [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n          @for (group of renderedGroups(); track $index) {\n            <div\n              class=\"ea-dropdown__group\"\n              [class.ea-dropdown__group--ruled]=\"group.rule\"\n              [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n              [attr.aria-label]=\"group.label ?? null\">\n              @if (group.label; as groupLabel) {\n                <div\n                  class=\"ea-dropdown__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </div>\n              }\n              @for (entry of group.options; track entry.option.value) {\n                <div\n                  class=\"ea-dropdown__option\"\n                  [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                  [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                  [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                  [id]=\"id() + '-option-' + entry.index\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                  [attr.aria-disabled]=\"entry.option.disabled || null\"\n                  (click)=\"select(entry.option)\"\n                  (mouseenter)=\"focusedIndex.set(entry.index)\">\n                  {{ entry.option.label }}\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (searchable() && filteredOptions().length === 0) {\n          <div\n            class=\"ea-dropdown__empty\"\n            role=\"status\">\n            {{ i18n.messages().dropdown.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -18119,6 +18350,16 @@ var DropdownComponent = class DropdownComponent {
 					"contextMenu"
 				],
 				outputs: ["closeRequested", "openRequested"]
+			},
+			{
+				kind: "component",
+				type: SearchIconComponent,
+				selector: "ea-icon-search"
+			},
+			{
+				kind: "component",
+				type: XIconComponent,
+				selector: "ea-icon-x"
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -18138,7 +18379,9 @@ i0.ɵɵngDeclareClassMetadata({
 				FieldLabelComponent,
 				FieldMessagesComponent,
 				NgClass,
-				PopoverComponent
+				PopoverComponent,
+				SearchIconComponent,
+				XIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
@@ -18146,8 +18389,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => DropdownComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-			styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:.25em 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
+			template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n      [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-dropdown__clear\"\n        [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n        (click)=\"clear()\">\n        <ea-icon-x aria-hidden=\"true\" />\n      </button>\n    }\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [role]=\"searchable() ? 'dialog' : 'listbox'\"\n      [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n      [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\"\n        (mousedown)=\"onMenuMousedown($event)\">\n        @if (searchable()) {\n          <div class=\"ea-dropdown__search\">\n            <ea-icon-search\n              class=\"ea-dropdown__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-dropdown__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput(searchEl.value)\"\n              (keydown)=\"handleSearchKeydown($event)\" />\n          </div>\n        }\n        <div\n          class=\"ea-dropdown__list\"\n          [attr.id]=\"searchable() ? listboxId() : null\"\n          [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n          [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n          @for (group of renderedGroups(); track $index) {\n            <div\n              class=\"ea-dropdown__group\"\n              [class.ea-dropdown__group--ruled]=\"group.rule\"\n              [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n              [attr.aria-label]=\"group.label ?? null\">\n              @if (group.label; as groupLabel) {\n                <div\n                  class=\"ea-dropdown__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </div>\n              }\n              @for (entry of group.options; track entry.option.value) {\n                <div\n                  class=\"ea-dropdown__option\"\n                  [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                  [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                  [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                  [id]=\"id() + '-option-' + entry.index\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                  [attr.aria-disabled]=\"entry.option.disabled || null\"\n                  (click)=\"select(entry.option)\"\n                  (mouseenter)=\"focusedIndex.set(entry.index)\">\n                  {{ entry.option.label }}\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (searchable() && filteredOptions().length === 0) {\n          <div\n            class=\"ea-dropdown__empty\"\n            role=\"status\">\n            {{ i18n.messages().dropdown.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -18156,6 +18399,14 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["triggerEl", { isSignal: true }]
 		}],
+		popover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }]
+		}],
+		searchEl: [{
+			type: i0.ViewChild,
+			args: ["searchEl", { isSignal: true }]
+		}],
 		label: [{
 			type: i0.Input,
 			args: [{
@@ -18228,6 +18479,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		searchable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchable",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -21720,6 +21987,7 @@ var LineChartComponent = class LineChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]
@@ -22290,6 +22558,7 @@ var TagComponent = class TagComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -23103,6 +23372,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -24594,6 +24864,7 @@ var PieChartComponent = class PieChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]