@eagami/ui 5.57.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: "مخطط خطي",
@@ -622,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",
@@ -838,7 +844,10 @@ const el = {
 			invalidType: "Το αρχείο πρέπει να είναι εικόνα",
 			tooLarge: (maxMb) => `Το αρχείο υπερβαίνει το όριο των ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Διαδρομή πλοήγησης" },
+		breadcrumbs: {
+			label: "Διαδρομή πλοήγησης",
+			showHidden: "Εμφάνιση κρυφών επιπέδων"
+		},
 		chart: {
 			roleDescription: "γράφημα",
 			lineChart: "Γράφημα γραμμών",
@@ -1054,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",
@@ -1270,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",
@@ -1486,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",
@@ -1702,7 +1720,10 @@ const he = {
 			invalidType: "הקובץ חייב להיות תמונה",
 			tooLarge: (maxMb) => `הקובץ חורג ממגבלת ${maxMb} MB`
 		},
-		breadcrumbs: { label: "נתיב ניווט" },
+		breadcrumbs: {
+			label: "נתיב ניווט",
+			showHidden: "הצגת הרמות המוסתרות"
+		},
 		chart: {
 			roleDescription: "תרשים",
 			lineChart: "תרשים קווי",
@@ -1918,7 +1939,10 @@ const hi = {
 			invalidType: "फ़ाइल एक छवि होनी चाहिए",
 			tooLarge: (maxMb) => `फ़ाइल ${maxMb} MB की सीमा से अधिक है`
 		},
-		breadcrumbs: { label: "ब्रेडक्रंब" },
+		breadcrumbs: {
+			label: "ब्रेडक्रंब",
+			showHidden: "छिपे हुए स्तर दिखाएँ"
+		},
 		chart: {
 			roleDescription: "चार्ट",
 			lineChart: "लाइन चार्ट",
@@ -2134,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",
@@ -2350,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",
@@ -2566,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",
@@ -2782,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",
@@ -2998,7 +3034,10 @@ const ru = {
 			invalidType: "Файл должен быть изображением",
 			tooLarge: (maxMb) => `Файл превышает лимит ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Навигационная цепочка" },
+		breadcrumbs: {
+			label: "Навигационная цепочка",
+			showHidden: "Показать скрытые уровни"
+		},
 		chart: {
 			roleDescription: "диаграмма",
 			lineChart: "Линейный график",
@@ -3214,7 +3253,10 @@ const uk = {
 			invalidType: "Файл має бути зображенням",
 			tooLarge: (maxMb) => `Файл перевищує ліміт ${maxMb} MB`
 		},
-		breadcrumbs: { label: "Навігаційний ланцюжок" },
+		breadcrumbs: {
+			label: "Навігаційний ланцюжок",
+			showHidden: "Показати приховані рівні"
+		},
 		chart: {
 			roleDescription: "діаграма",
 			lineChart: "Лінійний графік",
@@ -3430,7 +3472,10 @@ const zhCN = {
 			invalidType: "文件必须是图片",
 			tooLarge: (maxMb) => `文件超过 ${maxMb} MB 限制`
 		},
-		breadcrumbs: { label: "面包屑导航" },
+		breadcrumbs: {
+			label: "面包屑导航",
+			showHidden: "显示隐藏的层级"
+		},
 		chart: {
 			roleDescription: "图表",
 			lineChart: "折线图",
@@ -9940,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;
 	}
@@ -9965,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",
@@ -10001,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",
@@ -10010,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
 	});
@@ -10031,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: [{
@@ -10063,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: [{
@@ -14111,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,
@@ -14153,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: () => [],
@@ -16008,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 */ []);
@@ -16095,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 = [];
@@ -16109,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
 				});
 			}
@@ -16253,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));
 	}
@@ -16268,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;
@@ -16311,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(),
@@ -16476,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",
@@ -16759,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: [{
@@ -22241,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
 	});
 };
@@ -22256,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: {
@@ -28830,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();
@@ -28846,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();
@@ -28898,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",
@@ -28918,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
 	});
 };
@@ -28933,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: {
@@ -28954,6 +29432,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -28986,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);
 	}
@@ -29036,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()) {
@@ -29051,6 +29541,7 @@ var TabComponent = class TabComponent {
     }
   `,
 		isInline: true,
+		styles: [":host(.ea-tab--vertical){flex:1;min-width:0}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -29063,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
@@ -29076,7 +29570,8 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			changeDetection: ChangeDetectionStrategy.OnPush
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host(.ea-tab--vertical){flex:1;min-width:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -29134,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 */ []);
@@ -29153,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(),
@@ -29321,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",
@@ -29368,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",
@@ -29399,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
@@ -29416,7 +29941,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				FieldLabelComponent,
 				FieldMessagesComponent,
-				NgClass
+				NgClass,
+				NgTemplateOutlet
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
@@ -29424,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: {
@@ -29545,6 +30071,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCount",
+				required: false
+			}]
+		}],
 		maxHeight: [{
 			type: i0.Input,
 			args: [{
@@ -57409,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";