@eagami/ui 5.56.0 → 5.58.0

package/fesm2022/eagami-ui.mjs

@@ -406,7 +406,10 @@ const ar = {
 			invalidType: "يجب أن يكون الملف صورة",
 			tooLarge: (maxMb) => `الملف يتجاوز حد ${maxMb} MB`
 		},
-		breadcrumbs: { label: "مسار التنقل" },
+		breadcrumbs: {
+			label: "مسار التنقل",
+			showHidden: "إظهار المستويات المخفية"
+		},
 		chart: {
 			roleDescription: "مخطط",
 			lineChart: "مخطط خطي",
@@ -481,7 +484,13 @@ const ar = {
 		},
 		dialog: { close: "إغلاق مربع الحوار" },
 		drawer: { close: "إغلاق اللوحة" },
-		dropdown: { placeholder: "اختر…" },
+		dropdown: {
+			placeholder: "اختر…",
+			clear: "مسح التحديد",
+			dialogLabel: "اختيار خيار",
+			searchPlaceholder: "بحث…",
+			searchEmpty: "لا توجد مطابقات"
+		},
 		fieldLabel: { help: (label) => `مزيد من المعلومات حول ${label}` },
 		fileUploader: {
 			prompt: "انقر أو اسحب الملفات هنا للتحميل",
@@ -616,7 +625,10 @@ const de = {
 			invalidType: "Datei muss ein Bild sein",
 			tooLarge: (maxMb) => `Datei überschreitet das Limit von ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Brotkrümelnavigation" },
+		breadcrumbs: {
+			label: "Brotkrümelnavigation",
+			showHidden: "Ausgeblendete Ebenen anzeigen"
+		},
 		chart: {
 			roleDescription: "Diagramm",
 			lineChart: "Liniendiagramm",
@@ -691,7 +703,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",
@@ -826,7 +844,10 @@ const el = {
 			invalidType: "Το αρχείο πρέπει να είναι εικόνα",
 			tooLarge: (maxMb) => `Το αρχείο υπερβαίνει το όριο των ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Διαδρομή πλοήγησης" },
+		breadcrumbs: {
+			label: "Διαδρομή πλοήγησης",
+			showHidden: "Εμφάνιση κρυφών επιπέδων"
+		},
 		chart: {
 			roleDescription: "γράφημα",
 			lineChart: "Γράφημα γραμμών",
@@ -901,7 +922,13 @@ const el = {
 		},
 		dialog: { close: "Κλείσιμο παραθύρου διαλόγου" },
 		drawer: { close: "Κλείσιμο πίνακα" },
-		dropdown: { placeholder: "Επιλέξτε…" },
+		dropdown: {
+			placeholder: "Επιλέξτε…",
+			clear: "Εκκαθάριση επιλογής",
+			dialogLabel: "Επιλέξτε μια επιλογή",
+			searchPlaceholder: "Αναζήτηση…",
+			searchEmpty: "Δεν βρέθηκαν αποτελέσματα"
+		},
 		fieldLabel: { help: (label) => `Περισσότερες πληροφορίες: ${label}` },
 		fileUploader: {
 			prompt: "Κάντε κλικ ή σύρετε αρχεία εδώ για μεταφόρτωση",
@@ -1036,7 +1063,10 @@ const en = {
 			invalidType: "File must be an image",
 			tooLarge: (maxMb) => `File exceeds ${maxMb} MB limit`
 		},
-		breadcrumbs: { label: "Breadcrumb" },
+		breadcrumbs: {
+			label: "Breadcrumb",
+			showHidden: "Show hidden levels"
+		},
 		chart: {
 			roleDescription: "chart",
 			lineChart: "Line chart",
@@ -1111,7 +1141,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",
@@ -1246,7 +1282,10 @@ const esES = {
 			invalidType: "El archivo debe ser una imagen",
 			tooLarge: (maxMb) => `El archivo supera el límite de ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Ruta de navegación" },
+		breadcrumbs: {
+			label: "Ruta de navegación",
+			showHidden: "Mostrar los niveles ocultos"
+		},
 		chart: {
 			roleDescription: "gráfico",
 			lineChart: "Gráfico de líneas",
@@ -1321,7 +1360,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",
@@ -1456,7 +1501,10 @@ const frFR = {
 			invalidType: "Le fichier doit être une image",
 			tooLarge: (maxMb) => `Le fichier dépasse la limite de ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Fil d'Ariane" },
+		breadcrumbs: {
+			label: "Fil d'Ariane",
+			showHidden: "Afficher les niveaux masqués"
+		},
 		chart: {
 			roleDescription: "graphique",
 			lineChart: "Graphique linéaire",
@@ -1531,7 +1579,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",
@@ -1666,7 +1720,10 @@ const he = {
 			invalidType: "הקובץ חייב להיות תמונה",
 			tooLarge: (maxMb) => `הקובץ חורג ממגבלת ${maxMb} MB`
 		},
-		breadcrumbs: { label: "נתיב ניווט" },
+		breadcrumbs: {
+			label: "נתיב ניווט",
+			showHidden: "הצגת הרמות המוסתרות"
+		},
 		chart: {
 			roleDescription: "תרשים",
 			lineChart: "תרשים קווי",
@@ -1741,7 +1798,13 @@ const he = {
 		},
 		dialog: { close: "סגירת חלון" },
 		drawer: { close: "סגירת לוח" },
-		dropdown: { placeholder: "בחר…" },
+		dropdown: {
+			placeholder: "בחר…",
+			clear: "ניקוי הבחירה",
+			dialogLabel: "בחירת אפשרות",
+			searchPlaceholder: "חיפוש…",
+			searchEmpty: "אין התאמות"
+		},
 		fieldLabel: { help: (label) => `מידע נוסף על ${label}` },
 		fileUploader: {
 			prompt: "לחץ או גרור קבצים לכאן להעלאה",
@@ -1876,7 +1939,10 @@ const hi = {
 			invalidType: "फ़ाइल एक छवि होनी चाहिए",
 			tooLarge: (maxMb) => `फ़ाइल ${maxMb} MB की सीमा से अधिक है`
 		},
-		breadcrumbs: { label: "ब्रेडक्रंब" },
+		breadcrumbs: {
+			label: "ब्रेडक्रंब",
+			showHidden: "छिपे हुए स्तर दिखाएँ"
+		},
 		chart: {
 			roleDescription: "चार्ट",
 			lineChart: "लाइन चार्ट",
@@ -1951,7 +2017,13 @@ const hi = {
 		},
 		dialog: { close: "संवाद बंद करें" },
 		drawer: { close: "पैनल बंद करें" },
-		dropdown: { placeholder: "चुनें…" },
+		dropdown: {
+			placeholder: "चुनें…",
+			clear: "चयन साफ़ करें",
+			dialogLabel: "एक विकल्प चुनें",
+			searchPlaceholder: "खोजें…",
+			searchEmpty: "कोई मिलान नहीं"
+		},
 		fieldLabel: { help: (label) => `अधिक जानकारी: ${label}` },
 		fileUploader: {
 			prompt: "अपलोड करने के लिए फ़ाइलें यहाँ क्लिक करें या खींचें",
@@ -2086,7 +2158,10 @@ const is = {
 			invalidType: "Skráin verður að vera mynd",
 			tooLarge: (maxMb) => `Skráin fer yfir ${maxMb} MB mörkin`
 		},
-		breadcrumbs: { label: "Brauðmolaslóð" },
+		breadcrumbs: {
+			label: "Brauðmolaslóð",
+			showHidden: "Sýna falin stig"
+		},
 		chart: {
 			roleDescription: "graf",
 			lineChart: "Línurit",
@@ -2161,7 +2236,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",
@@ -2296,7 +2377,10 @@ const nl = {
 			invalidType: "Bestand moet een afbeelding zijn",
 			tooLarge: (maxMb) => `Bestand overschrijdt de limiet van ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Broodkruimelnavigatie" },
+		breadcrumbs: {
+			label: "Broodkruimelnavigatie",
+			showHidden: "Verborgen niveaus tonen"
+		},
 		chart: {
 			roleDescription: "grafiek",
 			lineChart: "Lijndiagram",
@@ -2371,7 +2455,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",
@@ -2506,7 +2596,10 @@ const pl = {
 			invalidType: "Plik musi być obrazem",
 			tooLarge: (maxMb) => `Plik przekracza limit ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Ścieżka nawigacji" },
+		breadcrumbs: {
+			label: "Ścieżka nawigacji",
+			showHidden: "Pokaż ukryte poziomy"
+		},
 		chart: {
 			roleDescription: "wykres",
 			lineChart: "Wykres liniowy",
@@ -2581,7 +2674,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ć",
@@ -2716,7 +2815,10 @@ const ptBR = {
 			invalidType: "O arquivo deve ser uma imagem",
 			tooLarge: (maxMb) => `O arquivo excede o limite de ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Trilha de navegação" },
+		breadcrumbs: {
+			label: "Trilha de navegação",
+			showHidden: "Mostrar os níveis ocultos"
+		},
 		chart: {
 			roleDescription: "gráfico",
 			lineChart: "Gráfico de linhas",
@@ -2791,7 +2893,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",
@@ -2926,7 +3034,10 @@ const ru = {
 			invalidType: "Файл должен быть изображением",
 			tooLarge: (maxMb) => `Файл превышает лимит ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Навигационная цепочка" },
+		breadcrumbs: {
+			label: "Навигационная цепочка",
+			showHidden: "Показать скрытые уровни"
+		},
 		chart: {
 			roleDescription: "диаграмма",
 			lineChart: "Линейный график",
@@ -3001,7 +3112,13 @@ const ru = {
 		},
 		dialog: { close: "Закрыть диалог" },
 		drawer: { close: "Закрыть панель" },
-		dropdown: { placeholder: "Выберите…" },
+		dropdown: {
+			placeholder: "Выберите…",
+			clear: "Очистить выбор",
+			dialogLabel: "Выбор варианта",
+			searchPlaceholder: "Поиск…",
+			searchEmpty: "Нет совпадений"
+		},
 		fieldLabel: { help: (label) => `Подробнее: ${label}` },
 		fileUploader: {
 			prompt: "Нажмите или перетащите файлы сюда для загрузки",
@@ -3136,7 +3253,10 @@ const uk = {
 			invalidType: "Файл має бути зображенням",
 			tooLarge: (maxMb) => `Файл перевищує ліміт ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Навігаційний ланцюжок" },
+		breadcrumbs: {
+			label: "Навігаційний ланцюжок",
+			showHidden: "Показати приховані рівні"
+		},
 		chart: {
 			roleDescription: "діаграма",
 			lineChart: "Лінійний графік",
@@ -3211,7 +3331,13 @@ const uk = {
 		},
 		dialog: { close: "Закрити діалог" },
 		drawer: { close: "Закрити панель" },
-		dropdown: { placeholder: "Виберіть…" },
+		dropdown: {
+			placeholder: "Виберіть…",
+			clear: "Очистити вибір",
+			dialogLabel: "Виберіть варіант",
+			searchPlaceholder: "Пошук…",
+			searchEmpty: "Немає збігів"
+		},
 		fieldLabel: { help: (label) => `Докладніше: ${label}` },
 		fileUploader: {
 			prompt: "Натисніть або перетягніть файли сюди для завантаження",
@@ -3346,7 +3472,10 @@ const zhCN = {
 			invalidType: "文件必须是图片",
 			tooLarge: (maxMb) => `文件超过 ${maxMb} MB 限制`
 		},
-		breadcrumbs: { label: "面包屑导航" },
+		breadcrumbs: {
+			label: "面包屑导航",
+			showHidden: "显示隐藏的层级"
+		},
 		chart: {
 			roleDescription: "图表",
 			lineChart: "折线图",
@@ -3421,7 +3550,13 @@ const zhCN = {
 		},
 		dialog: { close: "关闭对话框" },
 		drawer: { close: "关闭面板" },
-		dropdown: { placeholder: "请选择…" },
+		dropdown: {
+			placeholder: "请选择…",
+			clear: "清除选择",
+			dialogLabel: "选择一个选项",
+			searchPlaceholder: "搜索…",
+			searchEmpty: "无匹配项"
+		},
 		fieldLabel: { help: (label) => `关于 ${label} 的更多信息` },
 		fileUploader: {
 			prompt: "点击或拖动文件到此处上传",
@@ -7221,12 +7356,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 +7371,7 @@ var TooltipDirective = class TooltipDirective {
 	showHandler = () => {
 		if (this.controlled()) return;
 		this.pointerInside = true;
-		this.show();
+		this.requestShow();
 	};
 	pointerLeaveHandler = () => {
 		if (this.controlled()) return;
@@ -7250,7 +7387,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 +7447,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 +7534,7 @@ var TooltipDirective = class TooltipDirective {
 		}
 	}
 	hide() {
+		this.cancelPendingShow();
 		this.cancelPendingHide();
 		this.detachRepositionListeners();
 		if (this.rafId !== null) {
@@ -7547,6 +7704,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 +7780,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDelay",
+				required: false
+			}]
+		}],
 		dismissDelay: [{
 			type: i0.Input,
 			args: [{
@@ -8326,6 +8498,7 @@ var AvatarEditorComponent = class AvatarEditorComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -9580,6 +9753,7 @@ var BarChartComponent = class BarChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]
@@ -9811,17 +9985,169 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+var MoreHorizontalIconComponent = class MoreHorizontalIconComponent extends IconComponentBase {
+	static slug = "more-horizontal";
+	static category = "feather";
+	static tags = [
+		"more-horizontal",
+		"more",
+		"horizontal",
+		"ellipsis",
+		"menu",
+		"dots",
+		"options",
+		"plus",
+		"más",
+		"περισσότερα",
+		"więcej"
+	];
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: MoreHorizontalIconComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: MoreHorizontalIconComponent,
+		isStandalone: true,
+		selector: "ea-icon-more-horizontal",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="strokeWidth()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <circle
+        cx="12"
+        cy="12"
+        r="1" />
+      <circle
+        cx="19"
+        cy="12"
+        r="1" />
+      <circle
+        cx="5"
+        cy="12"
+        r="1" />
+    </svg>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MoreHorizontalIconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ea-icon-more-horizontal",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="strokeWidth()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <circle
+        cx="12"
+        cy="12"
+        r="1" />
+      <circle
+        cx="19"
+        cy="12"
+        r="1" />
+      <circle
+        cx="5"
+        cy="12"
+        r="1" />
+    </svg>
+  `
+		}]
+	}]
+});
 var BreadcrumbsComponent = class BreadcrumbsComponent {
 	i18n = inject(EagamiI18nService);
+	popover = viewChild(PopoverComponent, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+	expandEl = viewChild("expandEl", ...ngDevMode ? [{ debugName: "expandEl" }] : /* istanbul ignore next */ []);
+	menuEl = viewChild("menuEl", ...ngDevMode ? [{ debugName: "menuEl" }] : /* istanbul ignore next */ []);
+	sizerEl = viewChild("sizerEl", ...ngDevMode ? [{ debugName: "sizerEl" }] : /* istanbul ignore next */ []);
+	sizerItemEls = viewChildren("sizerItemEl", ...ngDevMode ? [{ debugName: "sizerItemEls" }] : /* istanbul ignore next */ []);
+	sizerExpandEl = viewChild("sizerExpandEl", ...ngDevMode ? [{ debugName: "sizerExpandEl" }] : /* istanbul ignore next */ []);
 	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 	separator = input("chevron", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	maxItems = input(void 0, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
+	overflow = input("menu", ...ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
 		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
 		alias: "aria-label"
 	});
 	clicked = output();
+	menuId = uniqueId("ea-breadcrumbs-menu");
+	menuOpen = signal(false, ...ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []);
+	menuPinned = false;
+	menuFocusPending = signal(false, ...ngDevMode ? [{ debugName: "menuFocusPending" }] : /* istanbul ignore next */ []);
+	crowdedOut = signal(0, ...ngDevMode ? [{ debugName: "crowdedOut" }] : /* istanbul ignore next */ []);
 	resolvedAriaLabel = computed(() => this.ariaLabel() ?? this.i18n.messages().breadcrumbs.label, ...ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []);
+	indexed = computed(() => this.items().map((item, index) => ({
+		item,
+		index
+	})), ...ngDevMode ? [{ debugName: "indexed" }] : /* istanbul ignore next */ []);
+	menuCount = computed(() => {
+		const count = this.items().length;
+		const max = this.maxItems();
+		const overMax = max ? count - Math.max(2, max) : 0;
+		const crowdedOut = this.overflow() === "menu" ? this.crowdedOut() : 0;
+		return Math.max(0, Math.min(count - 2, Math.max(overMax, crowdedOut)));
+	}, ...ngDevMode ? [{ debugName: "menuCount" }] : /* istanbul ignore next */ []);
+	crumbs = computed(() => {
+		const all = this.indexed();
+		const inMenu = this.menuCount();
+		return inMenu > 0 ? [all[0], ...all.slice(inMenu + 1)] : all;
+	}, ...ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []);
+	menuCrumbs = computed(() => this.indexed().slice(1, 1 + this.menuCount()), ...ngDevMode ? [{ debugName: "menuCrumbs" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect((onCleanup) => {
+			const sizer = this.sizerEl()?.nativeElement;
+			const expand = this.sizerExpandEl()?.nativeElement;
+			const levels = this.sizerItemEls();
+			if (!sizer || !expand || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.fit());
+			observer.observe(sizer);
+			observer.observe(expand);
+			for (const level of levels) observer.observe(level.nativeElement);
+			onCleanup(() => observer.disconnect());
+			untracked(() => this.fit());
+		});
+		afterRenderEffect(() => {
+			if (this.menuFocusPending() && this.popover()?.isPositioned()) untracked(() => {
+				this.menuFocusPending.set(false);
+				this.menuItems()[0]?.focus();
+			});
+		});
+		effect(() => {
+			if (this.menuCrumbs().length === 0) untracked(() => this.closeMenu());
+		});
+	}
 	isLast(index) {
 		return index === this.items().length - 1;
 	}
@@ -9836,6 +10162,94 @@ var BreadcrumbsComponent = class BreadcrumbsComponent {
 			event
 		});
 	}
+	toggleMenu() {
+		if (this.menuOpen() && this.menuPinned) this.closeMenu();
+		else this.openMenu(true);
+	}
+	handleExpandKeydown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			this.openMenu(true);
+		} else if (event.key === "Escape" && this.menuOpen()) {
+			event.preventDefault();
+			this.closeMenu();
+		}
+	}
+	handleExpandEnter() {
+		if (!this.menuOpen()) this.openMenu(false);
+	}
+	handleHoverLeave(event) {
+		if (this.menuPinned) return;
+		const next = event.relatedTarget;
+		if (!(next instanceof Node && (this.expandEl()?.nativeElement.contains(next) || this.menuEl()?.nativeElement.contains(next)))) this.closeMenu();
+	}
+	handleMenuClick(crumb, event) {
+		this.clicked.emit({
+			item: crumb.item,
+			index: crumb.index,
+			event
+		});
+		this.closeMenu(true);
+	}
+	handleMenuKeydown(event) {
+		const items = this.menuItems();
+		const current = items.findIndex((item) => item === document.activeElement);
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				items[current < items.length - 1 ? current + 1 : 0]?.focus();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				items[current > 0 ? current - 1 : items.length - 1]?.focus();
+				break;
+			case "Home":
+				event.preventDefault();
+				items[0]?.focus();
+				break;
+			case "End":
+				event.preventDefault();
+				items[items.length - 1]?.focus();
+				break;
+			case "Escape":
+				event.preventDefault();
+				this.closeMenu(true);
+				break;
+			case "Tab": this.closeMenu(true);
+		}
+	}
+	closeMenu(restoreFocus = false) {
+		if (!this.menuOpen()) return;
+		this.menuOpen.set(false);
+		this.menuPinned = false;
+		this.menuFocusPending.set(false);
+		if (restoreFocus) this.expandEl()?.nativeElement.focus();
+	}
+	openMenu(pinned) {
+		this.menuPinned = pinned;
+		this.menuOpen.set(true);
+		this.menuFocusPending.set(pinned);
+	}
+	menuItems() {
+		const menu = this.menuEl()?.nativeElement;
+		return menu ? Array.from(menu.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled])")) : [];
+	}
+	fit() {
+		const sizer = this.sizerEl()?.nativeElement;
+		const expand = this.sizerExpandEl()?.nativeElement;
+		if (!sizer || !expand) return;
+		const widths = this.sizerItemEls().map((level) => level.nativeElement.getBoundingClientRect().width);
+		const gap = parseFloat(getComputedStyle(sizer).columnGap) || 0;
+		const available = sizer.getBoundingClientRect().width;
+		let needed = widths.reduce((sum, width) => sum + width + gap, -gap);
+		let crowdedOut = 0;
+		while (crowdedOut < widths.length - 2 && needed > available + .5) {
+			crowdedOut++;
+			needed -= widths[crowdedOut] + gap;
+			if (crowdedOut === 1) needed += expand.getBoundingClientRect().width + gap;
+		}
+		this.crowdedOut.set(crowdedOut);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -9872,6 +10286,20 @@ var BreadcrumbsComponent = class BreadcrumbsComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			maxItems: {
+				classPropertyName: "maxItems",
+				publicName: "maxItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			overflow: {
+				classPropertyName: "overflow",
+				publicName: "overflow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "aria-label",
@@ -9881,14 +10309,100 @@ var BreadcrumbsComponent = class BreadcrumbsComponent {
 			}
 		},
 		outputs: { clicked: "clicked" },
+		viewQueries: [
+			{
+				propertyName: "popover",
+				first: true,
+				predicate: PopoverComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "expandEl",
+				first: true,
+				predicate: ["expandEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "menuEl",
+				first: true,
+				predicate: ["menuEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sizerEl",
+				first: true,
+				predicate: ["sizerEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sizerItemEls",
+				predicate: ["sizerItemEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sizerExpandEl",
+				first: true,
+				predicate: ["sizerExpandEl"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "<nav\n  class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }}\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n",
-		styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:.25em;min-width:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:default}.ea-breadcrumbs__current{padding:.125em .25em;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}\n"],
-		dependencies: [{
-			kind: "component",
-			type: ChevronRightIconComponent,
-			selector: "ea-icon-chevron-right"
-		}],
+		template: "<nav\n  class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }} ea-breadcrumbs--{{ overflow() }}\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (crumb of crumbs(); track crumb.index; let first = $first; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"crumb.item.href\"\n            (click)=\"handleClick(crumb.item, crumb.index, $event)\">\n            {{ crumb.item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(crumb.item, crumb.index, $event)\">\n            {{ crumb.item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n        }\n      </li>\n      @if (first && menuCrumbs().length > 0) {\n        <li class=\"ea-breadcrumbs__item\">\n          <button\n            #expandEl\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button ea-breadcrumbs__expand\"\n            aria-haspopup=\"menu\"\n            [attr.aria-expanded]=\"menuOpen()\"\n            [attr.aria-controls]=\"menuOpen() ? menuId : null\"\n            [attr.aria-label]=\"i18n.messages().breadcrumbs.showHidden\"\n            (click)=\"toggleMenu()\"\n            (keydown)=\"handleExpandKeydown($event)\"\n            (mouseenter)=\"handleExpandEnter()\"\n            (mouseleave)=\"handleHoverLeave($event)\">\n            <ea-icon-more-horizontal aria-hidden=\"true\" />\n          </button>\n          <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n        </li>\n      }\n    }\n  </ol>\n\n  @if (overflow() === 'menu') {\n    <div\n      #sizerEl\n      class=\"ea-breadcrumbs__sizer\"\n      aria-hidden=\"true\">\n      @for (item of items(); track $index; let last = $last) {\n        <span\n          #sizerItemEl\n          class=\"ea-breadcrumbs__item\">\n          <span [class]=\"last ? 'ea-breadcrumbs__current' : 'ea-breadcrumbs__link'\">\n            {{ item.label }}\n          </span>\n          @if (!last) {\n            <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n          }\n        </span>\n      }\n      <span\n        #sizerExpandEl\n        class=\"ea-breadcrumbs__item ea-breadcrumbs__sizer-expand\">\n        <span class=\"ea-breadcrumbs__link ea-breadcrumbs__expand\">\n          <ea-icon-more-horizontal />\n        </span>\n        <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n      </span>\n    </div>\n  }\n</nav>\n\n<ea-popover\n  [anchor]=\"expandEl()\"\n  [open]=\"menuOpen()\"\n  placement=\"bottom-start\"\n  role=\"menu\"\n  [surfaceId]=\"menuId\"\n  [aria-label]=\"i18n.messages().breadcrumbs.showHidden\"\n  [closeOnEscape]=\"false\"\n  (closeRequested)=\"closeMenu()\">\n  <div\n    #menuEl\n    class=\"ea-breadcrumbs__menu ea-breadcrumbs__menu--{{ size() }}\"\n    role=\"none\"\n    (keydown)=\"handleMenuKeydown($event)\"\n    (mouseleave)=\"handleHoverLeave($event)\">\n    <div\n      class=\"ea-breadcrumbs__menu-list\"\n      role=\"none\">\n      @for (crumb of menuCrumbs(); track crumb.index) {\n        @if (crumb.item.disabled) {\n          <span\n            class=\"ea-breadcrumbs__menu-item ea-breadcrumbs__menu-item--disabled\"\n            role=\"menuitem\"\n            aria-disabled=\"true\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.href) {\n          <a\n            class=\"ea-breadcrumbs__menu-item\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n            [href]=\"crumb.item.href\"\n            (click)=\"handleMenuClick(crumb, $event)\">\n            {{ crumb.item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__menu-item\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n            (click)=\"handleMenuClick(crumb, $event)\">\n            {{ crumb.item.label }}\n          </button>\n        }\n      }\n    </div>\n  </div>\n</ea-popover>\n\n<ng-template #separatorTpl>\n  @if (separator() === 'chevron') {\n    <ea-icon-chevron-right\n      class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n      aria-hidden=\"true\" />\n  } @else {\n    <span\n      class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n      aria-hidden=\"true\">\n      /\n    </span>\n  }\n</ng-template>\n",
+		styles: ["ea-breadcrumbs{display:block;min-width:0}.ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;flex-shrink:0;align-items:center;gap:.25em;min-width:0;white-space:nowrap}.ea-breadcrumbs--menu .ea-breadcrumbs__list>.ea-breadcrumbs__item:last-child{flex-shrink:1}.ea-breadcrumbs--scroll .ea-breadcrumbs__list{overflow-x:auto;padding:var(--space-1);margin:calc(-1 * var(--space-1))}.ea-breadcrumbs__sizer{position:relative;overflow:hidden;visibility:hidden;display:flex;flex-wrap:wrap;gap:.25em;height:0}.ea-breadcrumbs__sizer-expand{position:absolute;top:0;inset-inline-start:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:default}.ea-breadcrumbs__expand{display:inline-flex;align-items:center}.ea-breadcrumbs__current{overflow:hidden;min-width:0;padding:.125em .25em;text-overflow:ellipsis;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}.ea-breadcrumbs__menu{position:relative}.ea-breadcrumbs__menu--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs__menu--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs__menu--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs__menu--md{font-size:var(--font-size-md)}.ea-breadcrumbs__menu--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs__menu--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__menu:before,.ea-breadcrumbs__menu:after{position:absolute;right:0;left:0;height:var(--space-1);content:\"\"}.ea-breadcrumbs__menu:before{bottom:100%}.ea-breadcrumbs__menu:after{top:100%}.ea-breadcrumbs__menu-list{overflow-y:auto;min-width:10em;padding:.25em 0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}@media(forced-colors:active){.ea-breadcrumbs__menu-list{border:1px solid CanvasText}}.ea-breadcrumbs__menu-list{max-height:20rem;background-color:var(--color-bg-elevated)}.ea-breadcrumbs__menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;text-align:start;font-family:var(--font-family-sans);border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__menu-item:hover:not(.ea-breadcrumbs__menu-item--disabled),.ea-breadcrumbs__menu-item:focus-visible:not(.ea-breadcrumbs__menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-breadcrumbs__menu-item:hover:not(.ea-breadcrumbs__menu-item--disabled),.ea-breadcrumbs__menu-item:focus-visible:not(.ea-breadcrumbs__menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-breadcrumbs__menu-item:focus-visible{outline:none}.ea-breadcrumbs__menu-item{text-decoration:none}.ea-breadcrumbs__menu-item--disabled{color:var(--color-text-disabled);cursor:default}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: ChevronRightIconComponent,
+				selector: "ea-icon-chevron-right"
+			},
+			{
+				kind: "component",
+				type: MoreHorizontalIconComponent,
+				selector: "ea-icon-more-horizontal"
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: PopoverComponent,
+				selector: "ea-popover",
+				inputs: [
+					"anchor",
+					"open",
+					"placement",
+					"anchorPoint",
+					"role",
+					"aria-label",
+					"aria-labelledby",
+					"trapFocus",
+					"surfaceId",
+					"offset",
+					"flip",
+					"clamp",
+					"matchAnchorWidth",
+					"maxWidth",
+					"closeOnOutsideClick",
+					"closeOnEscape",
+					"scrollBehavior",
+					"contextMenu"
+				],
+				outputs: ["closeRequested", "openRequested"]
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -9902,14 +10416,44 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ea-breadcrumbs",
-			imports: [ChevronRightIconComponent],
+			imports: [
+				ChevronRightIconComponent,
+				MoreHorizontalIconComponent,
+				NgTemplateOutlet,
+				PopoverComponent
+			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			template: "<nav\n  class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }}\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n",
-			styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:.25em;min-width:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:default}.ea-breadcrumbs__current{padding:.125em .25em;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}\n"]
+			template: "<nav\n  class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }} ea-breadcrumbs--{{ overflow() }}\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (crumb of crumbs(); track crumb.index; let first = $first; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"crumb.item.href\"\n            (click)=\"handleClick(crumb.item, crumb.index, $event)\">\n            {{ crumb.item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(crumb.item, crumb.index, $event)\">\n            {{ crumb.item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n        }\n      </li>\n      @if (first && menuCrumbs().length > 0) {\n        <li class=\"ea-breadcrumbs__item\">\n          <button\n            #expandEl\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button ea-breadcrumbs__expand\"\n            aria-haspopup=\"menu\"\n            [attr.aria-expanded]=\"menuOpen()\"\n            [attr.aria-controls]=\"menuOpen() ? menuId : null\"\n            [attr.aria-label]=\"i18n.messages().breadcrumbs.showHidden\"\n            (click)=\"toggleMenu()\"\n            (keydown)=\"handleExpandKeydown($event)\"\n            (mouseenter)=\"handleExpandEnter()\"\n            (mouseleave)=\"handleHoverLeave($event)\">\n            <ea-icon-more-horizontal aria-hidden=\"true\" />\n          </button>\n          <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n        </li>\n      }\n    }\n  </ol>\n\n  @if (overflow() === 'menu') {\n    <div\n      #sizerEl\n      class=\"ea-breadcrumbs__sizer\"\n      aria-hidden=\"true\">\n      @for (item of items(); track $index; let last = $last) {\n        <span\n          #sizerItemEl\n          class=\"ea-breadcrumbs__item\">\n          <span [class]=\"last ? 'ea-breadcrumbs__current' : 'ea-breadcrumbs__link'\">\n            {{ item.label }}\n          </span>\n          @if (!last) {\n            <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n          }\n        </span>\n      }\n      <span\n        #sizerExpandEl\n        class=\"ea-breadcrumbs__item ea-breadcrumbs__sizer-expand\">\n        <span class=\"ea-breadcrumbs__link ea-breadcrumbs__expand\">\n          <ea-icon-more-horizontal />\n        </span>\n        <ng-container [ngTemplateOutlet]=\"separatorTpl\" />\n      </span>\n    </div>\n  }\n</nav>\n\n<ea-popover\n  [anchor]=\"expandEl()\"\n  [open]=\"menuOpen()\"\n  placement=\"bottom-start\"\n  role=\"menu\"\n  [surfaceId]=\"menuId\"\n  [aria-label]=\"i18n.messages().breadcrumbs.showHidden\"\n  [closeOnEscape]=\"false\"\n  (closeRequested)=\"closeMenu()\">\n  <div\n    #menuEl\n    class=\"ea-breadcrumbs__menu ea-breadcrumbs__menu--{{ size() }}\"\n    role=\"none\"\n    (keydown)=\"handleMenuKeydown($event)\"\n    (mouseleave)=\"handleHoverLeave($event)\">\n    <div\n      class=\"ea-breadcrumbs__menu-list\"\n      role=\"none\">\n      @for (crumb of menuCrumbs(); track crumb.index) {\n        @if (crumb.item.disabled) {\n          <span\n            class=\"ea-breadcrumbs__menu-item ea-breadcrumbs__menu-item--disabled\"\n            role=\"menuitem\"\n            aria-disabled=\"true\">\n            {{ crumb.item.label }}\n          </span>\n        } @else if (crumb.item.href) {\n          <a\n            class=\"ea-breadcrumbs__menu-item\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n            [href]=\"crumb.item.href\"\n            (click)=\"handleMenuClick(crumb, $event)\">\n            {{ crumb.item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__menu-item\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n            (click)=\"handleMenuClick(crumb, $event)\">\n            {{ crumb.item.label }}\n          </button>\n        }\n      }\n    </div>\n  </div>\n</ea-popover>\n\n<ng-template #separatorTpl>\n  @if (separator() === 'chevron') {\n    <ea-icon-chevron-right\n      class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n      aria-hidden=\"true\" />\n  } @else {\n    <span\n      class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n      aria-hidden=\"true\">\n      /\n    </span>\n  }\n</ng-template>\n",
+			styles: ["ea-breadcrumbs{display:block;min-width:0}.ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;flex-shrink:0;align-items:center;gap:.25em;min-width:0;white-space:nowrap}.ea-breadcrumbs--menu .ea-breadcrumbs__list>.ea-breadcrumbs__item:last-child{flex-shrink:1}.ea-breadcrumbs--scroll .ea-breadcrumbs__list{overflow-x:auto;padding:var(--space-1);margin:calc(-1 * var(--space-1))}.ea-breadcrumbs__sizer{position:relative;overflow:hidden;visibility:hidden;display:flex;flex-wrap:wrap;gap:.25em;height:0}.ea-breadcrumbs__sizer-expand{position:absolute;top:0;inset-inline-start:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:default}.ea-breadcrumbs__expand{display:inline-flex;align-items:center}.ea-breadcrumbs__current{overflow:hidden;min-width:0;padding:.125em .25em;text-overflow:ellipsis;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}.ea-breadcrumbs__menu{position:relative}.ea-breadcrumbs__menu--2xs{font-size:var(--font-size-2xs)}.ea-breadcrumbs__menu--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs__menu--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs__menu--md{font-size:var(--font-size-md)}.ea-breadcrumbs__menu--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs__menu--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__menu:before,.ea-breadcrumbs__menu:after{position:absolute;right:0;left:0;height:var(--space-1);content:\"\"}.ea-breadcrumbs__menu:before{bottom:100%}.ea-breadcrumbs__menu:after{top:100%}.ea-breadcrumbs__menu-list{overflow-y:auto;min-width:10em;padding:.25em 0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}@media(forced-colors:active){.ea-breadcrumbs__menu-list{border:1px solid CanvasText}}.ea-breadcrumbs__menu-list{max-height:20rem;background-color:var(--color-bg-elevated)}.ea-breadcrumbs__menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;text-align:start;font-family:var(--font-family-sans);border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__menu-item:hover:not(.ea-breadcrumbs__menu-item--disabled),.ea-breadcrumbs__menu-item:focus-visible:not(.ea-breadcrumbs__menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-breadcrumbs__menu-item:hover:not(.ea-breadcrumbs__menu-item--disabled),.ea-breadcrumbs__menu-item:focus-visible:not(.ea-breadcrumbs__menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-breadcrumbs__menu-item:focus-visible{outline:none}.ea-breadcrumbs__menu-item{text-decoration:none}.ea-breadcrumbs__menu-item--disabled{color:var(--color-text-disabled);cursor:default}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
+		popover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }]
+		}],
+		expandEl: [{
+			type: i0.ViewChild,
+			args: ["expandEl", { isSignal: true }]
+		}],
+		menuEl: [{
+			type: i0.ViewChild,
+			args: ["menuEl", { isSignal: true }]
+		}],
+		sizerEl: [{
+			type: i0.ViewChild,
+			args: ["sizerEl", { isSignal: true }]
+		}],
+		sizerItemEls: [{
+			type: i0.ViewChildren,
+			args: ["sizerItemEl", { isSignal: true }]
+		}],
+		sizerExpandEl: [{
+			type: i0.ViewChild,
+			args: ["sizerExpandEl", { isSignal: true }]
+		}],
 		items: [{
 			type: i0.Input,
 			args: [{
@@ -9934,6 +10478,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		maxItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxItems",
+				required: false
+			}]
+		}],
+		overflow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overflow",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -10945,6 +11505,7 @@ var CheckboxComponent = class CheckboxComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -13981,7 +14542,7 @@ var MenuComponent = class MenuComponent {
 		}],
 		ngImport: i0,
 		template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  [anchorPoint]=\"anchorPoint()\"\n  [contextMenu]=\"asContextMenu()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n",
-		styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"],
+		styles: [":host{display:contents}.ea-menu__list{overflow-y:auto;min-width:10em;padding:.25em 0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list{background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"],
 		dependencies: [{
 			kind: "component",
 			type: PopoverComponent,
@@ -14023,7 +14584,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [PopoverComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  [anchorPoint]=\"anchorPoint()\"\n  [contextMenu]=\"asContextMenu()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n",
-			styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"]
+			styles: [":host{display:contents}.ea-menu__list{overflow-y:auto;min-width:10em;padding:.25em 0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list{background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -15878,6 +16439,8 @@ var DatePickerComponent = class DatePickerComponent {
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
 	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
 	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	disabledWeekdays = input([], ...ngDevMode ? [{ debugName: "disabledWeekdays" }] : /* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []);
 	format = input("medium", ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
 	weekStartsOn = input(1, ...ngDevMode ? [{ debugName: "weekStartsOn" }] : /* istanbul ignore next */ []);
 	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
@@ -15965,8 +16528,6 @@ var DatePickerComponent = class DatePickerComponent {
 		const today = this.startOfDay(/* @__PURE__ */ new Date());
 		const selected = this.value();
 		const focused = this.focusedDate();
-		const min = this.minDate() ? this.startOfDay(this.minDate()) : null;
-		const max = this.maxDate() ? this.startOfDay(this.maxDate()) : null;
 		const rows = [];
 		for (let row = 0; row < 6; row++) {
 			const cells = [];
@@ -15979,7 +16540,7 @@ var DatePickerComponent = class DatePickerComponent {
 					isCurrentMonth: cellDate.getMonth() === month,
 					isToday: this.isSameDay(cellDate, today),
 					isSelected: selected ? this.isSameDay(cellDate, selected) : false,
-					isDisabled: (min ? cellDate < min : false) || (max ? cellDate > max : false),
+					isDisabled: this.isUnavailable(cellDate),
 					isFocused: focused ? this.isSameDay(cellDate, focused) : false
 				});
 			}
@@ -16123,7 +16684,7 @@ var DatePickerComponent = class DatePickerComponent {
 			locale: this.effectiveLocale(),
 			monthNames: this.i18n.messages().datePicker.months
 		});
-		if (!parsed || this.isOutOfRange(parsed)) return;
+		if (!parsed || this.isUnavailable(parsed)) return;
 		const current = this.value();
 		if (!current || !this.isSameDay(parsed, current)) this.applyValue(this.startOfDay(parsed));
 	}
@@ -16138,10 +16699,15 @@ var DatePickerComponent = class DatePickerComponent {
 		this.onTouched();
 		this.changed.emit(date);
 	}
-	isOutOfRange(date) {
+	isUnavailable(date) {
 		const min = this.minDate();
 		const max = this.maxDate();
-		return !!min && date < this.startOfDay(min) || !!max && date > this.startOfDay(max);
+		return !!min && date < this.startOfDay(min) || !!max && date > this.startOfDay(max) || this.disabledWeekdays().includes(date.getDay()) || this.disabledDates().some((entry) => this.covers(entry, date));
+	}
+	covers(entry, date) {
+		if (entry instanceof Date) return this.isSameDay(entry, date);
+		const day = this.startOfDay(date);
+		return day >= this.startOfDay(entry.start) && day <= this.startOfDay(entry.end);
 	}
 	handleGridKeydown(event) {
 		if (!this.isOpen()) return;
@@ -16181,7 +16747,7 @@ var DatePickerComponent = class DatePickerComponent {
 			case " ": {
 				event.preventDefault();
 				const current = this.focusedDate();
-				if (!current || this.isOutOfRange(current)) return;
+				if (!current || this.isUnavailable(current)) return;
 				this.selectDay({
 					date: current,
 					day: current.getDate(),
@@ -16346,6 +16912,20 @@ var DatePickerComponent = class DatePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			disabledWeekdays: {
+				classPropertyName: "disabledWeekdays",
+				publicName: "disabledWeekdays",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			format: {
 				classPropertyName: "format",
 				publicName: "format",
@@ -16629,6 +17209,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		disabledWeekdays: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledWeekdays",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
 		format: [{
 			type: i0.Input,
 			args: [{
@@ -17745,9 +18341,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 +18367,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 +18377,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 +18385,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 +18401,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 +18440,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 +18512,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 +18588,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 +18671,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 +18730,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 +18816,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 +18845,9 @@ i0.ɵɵngDeclareClassMetadata({
 				FieldLabelComponent,
 				FieldMessagesComponent,
 				NgClass,
-				PopoverComponent
+				PopoverComponent,
+				SearchIconComponent,
+				XIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
@@ -18146,8 +18855,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 +18865,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 +18945,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 +22453,7 @@ var LineChartComponent = class LineChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]
@@ -21973,7 +22707,7 @@ var MenuItemComponent = class MenuItemComponent {
 		outputs: { clicked: "clicked" },
 		ngImport: i0,
 		template: "<button\n  type=\"button\"\n  class=\"ea-menu-item\"\n  role=\"menuitem\"\n  [id]=\"itemId\"\n  [attr.tabindex]=\"tabIndex()\"\n  [class.ea-menu-item--disabled]=\"disabled()\"\n  [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\">\n  <span class=\"ea-menu-item__icon\">\n    <ng-content select=\"[slot=icon]\" />\n  </span>\n  <span class=\"ea-menu-item__label\">\n    <ng-content />\n  </span>\n</button>\n",
-		styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);text-align:start;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:default}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"],
+		styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;text-align:start;font-family:var(--font-family-sans);border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:default}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -21988,7 +22722,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ea-menu-item",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<button\n  type=\"button\"\n  class=\"ea-menu-item\"\n  role=\"menuitem\"\n  [id]=\"itemId\"\n  [attr.tabindex]=\"tabIndex()\"\n  [class.ea-menu-item--disabled]=\"disabled()\"\n  [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\">\n  <span class=\"ea-menu-item__icon\">\n    <ng-content select=\"[slot=icon]\" />\n  </span>\n  <span class=\"ea-menu-item__label\">\n    <ng-content />\n  </span>\n</button>\n",
-			styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);text-align:start;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:default}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"]
+			styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;text-align:start;font-family:var(--font-family-sans);border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:default}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -22290,6 +23024,7 @@ var TagComponent = class TagComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -23103,6 +23838,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"flip",
 					"whenClipped",
 					"maxWidth",
+					"showDelay",
 					"dismissDelay",
 					"tooltipOpen"
 				]
@@ -24594,6 +25330,7 @@ var PieChartComponent = class PieChartComponent {
 				"flip",
 				"whenClipped",
 				"maxWidth",
+				"showDelay",
 				"dismissDelay",
 				"tooltipOpen"
 			]
@@ -28559,6 +29296,7 @@ var TabsComponent = class TabsComponent {
 	registeredTabs = signal([], ...ngDevMode ? [{ debugName: "registeredTabs" }] : /* istanbul ignore next */ []);
 	variant = input("underline", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	activeTab = model("", ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
 	changed = output();
@@ -28575,9 +29313,13 @@ var TabsComponent = class TabsComponent {
 	handleKeydown(event) {
 		const tabList = this.registeredTabs().filter((t) => !t.disabled());
 		const currentIndex = tabList.findIndex((t) => t.value() === this.activeTab());
-		const rtl = isRtl(event.currentTarget);
-		const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
-		const backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
+		let forwardKey = "ArrowDown";
+		let backwardKey = "ArrowUp";
+		if (this.orientation() === "horizontal") {
+			const rtl = isRtl(event.currentTarget);
+			forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+			backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
+		}
 		let nextIndex = -1;
 		if (event.key === forwardKey) {
 			event.preventDefault();
@@ -28627,6 +29369,13 @@ var TabsComponent = class TabsComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -28647,8 +29396,8 @@ var TabsComponent = class TabsComponent {
 			changed: "changed"
 		},
 		ngImport: i0,
-		template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list ea-tabs__list--{{ size() }}\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n",
-		styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:.25em}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs__list--underline .ea-tabs__trigger--active{border-color:Highlight;color:Highlight}}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{padding:.25em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}@media(forced-colors:active){.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-tabs__list--2xs{font-size:var(--font-size-2xs)}.ea-tabs__list--xs{font-size:var(--font-size-xs)}.ea-tabs__list--sm{font-size:var(--font-size-sm)}.ea-tabs__list--md{font-size:var(--font-size-md)}.ea-tabs__list--lg{font-size:var(--font-size-lg)}.ea-tabs__list--xl{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tabs__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tabs__trigger:disabled{opacity:.5;cursor:default}\n"],
+		template: "<div\n  class=\"ea-tabs\"\n  [class.ea-tabs--vertical]=\"orientation() === 'vertical'\">\n  <div\n    class=\"ea-tabs__list ea-tabs__list--{{ size() }}\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n",
+		styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:.25em}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs__list--underline .ea-tabs__trigger--active{border-color:Highlight;color:Highlight}}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{padding:.25em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}@media(forced-colors:active){.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-tabs__list--2xs{font-size:var(--font-size-2xs)}.ea-tabs__list--xs{font-size:var(--font-size-xs)}.ea-tabs__list--sm{font-size:var(--font-size-sm)}.ea-tabs__list--md{font-size:var(--font-size-md)}.ea-tabs__list--lg{font-size:var(--font-size-lg)}.ea-tabs__list--xl{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tabs__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tabs__trigger:disabled{opacity:.5;cursor:default}.ea-tabs--vertical{flex-direction:row}.ea-tabs--vertical .ea-tabs__list{flex-direction:column;flex-shrink:0}.ea-tabs--vertical .ea-tabs__list--underline{border-bottom:none;border-inline-end:var(--border-width-thin) solid var(--color-border-default)}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger{margin-bottom:0;margin-inline-end:calc(-1 * var(--border-width-thin));border-bottom:none;border-inline-end:var(--border-width-medium) solid transparent}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger--active{border-inline-end-color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger--active{border-inline-end-color:Highlight}}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-inline-end-color:var(--color-border-strong)}.ea-tabs--vertical .ea-tabs__list--filled{align-self:flex-start}.ea-tabs--vertical .ea-tabs__trigger{justify-content:flex-start}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -28662,8 +29411,8 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ea-tabs",
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list ea-tabs__list--{{ size() }}\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n",
-			styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:.25em}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs__list--underline .ea-tabs__trigger--active{border-color:Highlight;color:Highlight}}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{padding:.25em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}@media(forced-colors:active){.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-tabs__list--2xs{font-size:var(--font-size-2xs)}.ea-tabs__list--xs{font-size:var(--font-size-xs)}.ea-tabs__list--sm{font-size:var(--font-size-sm)}.ea-tabs__list--md{font-size:var(--font-size-md)}.ea-tabs__list--lg{font-size:var(--font-size-lg)}.ea-tabs__list--xl{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tabs__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tabs__trigger:disabled{opacity:.5;cursor:default}\n"]
+			template: "<div\n  class=\"ea-tabs\"\n  [class.ea-tabs--vertical]=\"orientation() === 'vertical'\">\n  <div\n    class=\"ea-tabs__list ea-tabs__list--{{ size() }}\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n",
+			styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:.25em}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs__list--underline .ea-tabs__trigger--active{border-color:Highlight;color:Highlight}}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{padding:.25em;border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}@media(forced-colors:active){.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-tabs__list--2xs{font-size:var(--font-size-2xs)}.ea-tabs__list--xs{font-size:var(--font-size-xs)}.ea-tabs__list--sm{font-size:var(--font-size-sm)}.ea-tabs__list--md{font-size:var(--font-size-md)}.ea-tabs__list--lg{font-size:var(--font-size-lg)}.ea-tabs__list--xl{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tabs__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tabs__trigger:disabled{opacity:.5;cursor:default}.ea-tabs--vertical{flex-direction:row}.ea-tabs--vertical .ea-tabs__list{flex-direction:column;flex-shrink:0}.ea-tabs--vertical .ea-tabs__list--underline{border-bottom:none;border-inline-end:var(--border-width-thin) solid var(--color-border-default)}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger{margin-bottom:0;margin-inline-end:calc(-1 * var(--border-width-thin));border-bottom:none;border-inline-end:var(--border-width-medium) solid transparent}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger--active{border-inline-end-color:var(--color-brand-text)}@media(forced-colors:active){.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger--active{border-inline-end-color:Highlight}}.ea-tabs--vertical .ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-inline-end-color:var(--color-border-strong)}.ea-tabs--vertical .ea-tabs__list--filled{align-self:flex-start}.ea-tabs--vertical .ea-tabs__trigger{justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28683,6 +29432,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -28715,6 +29472,7 @@ var TabComponent = class TabComponent {
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	id = input(uniqueId("ea-tab"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
 	isActive = computed(() => this.tabs.activeTab() === this.value(), ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	vertical = computed(() => this.tabs.orientation() === "vertical", ...ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []);
 	ngOnInit() {
 		this.tabs.registerTab(this);
 	}
@@ -28765,7 +29523,10 @@ var TabComponent = class TabComponent {
 				transformFunction: null
 			}
 		},
-		host: { properties: { "style.display": "isActive() ? null : \"none\"" } },
+		host: { properties: {
+			"style.display": "isActive() ? null : \"none\"",
+			"class.ea-tab--vertical": "vertical()"
+		} },
 		ngImport: i0,
 		template: `
     @if (isActive()) {
@@ -28780,6 +29541,7 @@ var TabComponent = class TabComponent {
     }
   `,
 		isInline: true,
+		styles: [":host(.ea-tab--vertical){flex:1;min-width:0}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -28792,7 +29554,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ea-tab",
-			host: { "[style.display]": "isActive() ? null : \"none\"" },
+			host: {
+				"[style.display]": "isActive() ? null : \"none\"",
+				"[class.ea-tab--vertical]": "vertical()"
+			},
 			template: `
     @if (isActive()) {
       <div
@@ -28805,7 +29570,8 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			changeDetection: ChangeDetectionStrategy.OnPush
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host(.ea-tab--vertical){flex:1;min-width:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28863,6 +29629,7 @@ var TextareaComponent = class TextareaComponent {
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	resize = input("vertical", ...ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []);
 	maxlength = input(void 0, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
+	showCount = input(false, ...ngDevMode ? [{ debugName: "showCount" }] : /* istanbul ignore next */ []);
 	maxHeight = input(void 0, ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
 	minHeight = input(void 0, ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
 	id = input(uniqueId("ea-textarea"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
@@ -28882,6 +29649,18 @@ var TextareaComponent = class TextareaComponent {
 	hasError = this.errorState.hasError;
 	showError = this.hasError;
 	showHint = computed(() => !!this.hint() && !this.hasError(), ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
+	countText = computed(() => {
+		const length = this.value().length;
+		const max = this.maxlength();
+		return max ? `${length} / ${max}` : `${length}`;
+	}, ...ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [];
+		if (this.showError()) ids.push(`${this.id()}-error`);
+		else if (this.showHint()) ids.push(`${this.id()}-hint`);
+		if (this.showCount()) ids.push(`${this.id()}-count`);
+		return ids.length > 0 ? ids.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	wrapperClasses = computed(() => ({
 		[`ea-textarea-wrapper--${this.size()}`]: true,
 		"ea-textarea-wrapper--error": this.hasError(),
@@ -29050,6 +29829,13 @@ var TextareaComponent = class TextareaComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			showCount: {
+				classPropertyName: "showCount",
+				publicName: "showCount",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			maxHeight: {
 				classPropertyName: "maxHeight",
 				publicName: "maxHeight",
@@ -29097,8 +29883,8 @@ var TextareaComponent = class TextareaComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-		styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
+		template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
+		styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -29128,6 +29914,16 @@ var TextareaComponent = class TextareaComponent {
 				type: NgClass,
 				selector: "[ngClass]",
 				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -29145,7 +29941,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				FieldLabelComponent,
 				FieldMessagesComponent,
-				NgClass
+				NgClass,
+				NgTemplateOutlet
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
@@ -29153,8 +29950,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => TextareaComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-			styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
+			template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
+			styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -29274,6 +30071,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCount",
+				required: false
+			}]
+		}],
 		maxHeight: [{
 			type: i0.Input,
 			args: [{
@@ -57138,105 +57943,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-var MoreHorizontalIconComponent = class MoreHorizontalIconComponent extends IconComponentBase {
-	static slug = "more-horizontal";
-	static category = "feather";
-	static tags = [
-		"more-horizontal",
-		"more",
-		"horizontal",
-		"ellipsis",
-		"menu",
-		"dots",
-		"options",
-		"plus",
-		"más",
-		"περισσότερα",
-		"więcej"
-	];
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.1",
-		ngImport: i0,
-		type: MoreHorizontalIconComponent,
-		deps: null,
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "14.0.0",
-		version: "22.2.1",
-		type: MoreHorizontalIconComponent,
-		isStandalone: true,
-		selector: "ea-icon-more-horizontal",
-		usesInheritance: true,
-		ngImport: i0,
-		template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      [attr.stroke-width]="strokeWidth()"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <circle
-        cx="12"
-        cy="12"
-        r="1" />
-      <circle
-        cx="19"
-        cy="12"
-        r="1" />
-      <circle
-        cx="5"
-        cy="12"
-        r="1" />
-    </svg>
-  `,
-		isInline: true,
-		changeDetection: i0.ChangeDetectionStrategy.OnPush
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: MoreHorizontalIconComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ea-icon-more-horizontal",
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      [attr.stroke-width]="strokeWidth()"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <circle
-        cx="12"
-        cy="12"
-        r="1" />
-      <circle
-        cx="19"
-        cy="12"
-        r="1" />
-      <circle
-        cx="5"
-        cy="12"
-        r="1" />
-    </svg>
-  `
-		}]
-	}]
-});
 var MoreVerticalIconComponent = class MoreVerticalIconComponent extends IconComponentBase {
 	static slug = "more-vertical";
 	static category = "feather";