@eagami/ui 5.53.0 → 5.54.0

package/fesm2022/eagami-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { CSP_NONCE, ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
 const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
@@ -482,6 +482,7 @@ const ar = {
 		dialog: { close: "إغلاق مربع الحوار" },
 		drawer: { close: "إغلاق اللوحة" },
 		dropdown: { placeholder: "اختر…" },
+		fieldLabel: { help: (label) => `مزيد من المعلومات حول ${label}` },
 		fileUploader: {
 			prompt: "انقر أو اسحب الملفات هنا للتحميل",
 			promptSingle: "انقر أو اسحب ملفًا هنا للتحميل",
@@ -691,6 +692,7 @@ const de = {
 		dialog: { close: "Dialog schließen" },
 		drawer: { close: "Panel schließen" },
 		dropdown: { placeholder: "Auswählen…" },
+		fieldLabel: { help: (label) => `Weitere Informationen zu ${label}` },
 		fileUploader: {
 			prompt: "Dateien hierher klicken oder ziehen zum Hochladen",
 			promptSingle: "Datei hierher klicken oder ziehen zum Hochladen",
@@ -900,6 +902,7 @@ const el = {
 		dialog: { close: "Κλείσιμο παραθύρου διαλόγου" },
 		drawer: { close: "Κλείσιμο πίνακα" },
 		dropdown: { placeholder: "Επιλέξτε…" },
+		fieldLabel: { help: (label) => `Περισσότερες πληροφορίες: ${label}` },
 		fileUploader: {
 			prompt: "Κάντε κλικ ή σύρετε αρχεία εδώ για μεταφόρτωση",
 			promptSingle: "Κάντε κλικ ή σύρετε ένα αρχείο εδώ για μεταφόρτωση",
@@ -1109,6 +1112,7 @@ const en = {
 		dialog: { close: "Close dialog" },
 		drawer: { close: "Close panel" },
 		dropdown: { placeholder: "Select…" },
+		fieldLabel: { help: (label) => `More information about ${label}` },
 		fileUploader: {
 			prompt: "Click or drag files here to upload",
 			promptSingle: "Click or drag a file here to upload",
@@ -1318,6 +1322,7 @@ const esES = {
 		dialog: { close: "Cerrar diálogo" },
 		drawer: { close: "Cerrar panel" },
 		dropdown: { placeholder: "Seleccionar…" },
+		fieldLabel: { help: (label) => `Más información sobre ${label}` },
 		fileUploader: {
 			prompt: "Haz clic o arrastra archivos aquí para subirlos",
 			promptSingle: "Haz clic o arrastra un archivo aquí para subirlo",
@@ -1527,6 +1532,7 @@ const frFR = {
 		dialog: { close: "Fermer la boîte de dialogue" },
 		drawer: { close: "Fermer le panneau" },
 		dropdown: { placeholder: "Sélectionner…" },
+		fieldLabel: { help: (label) => `Plus d’informations sur ${label}` },
 		fileUploader: {
 			prompt: "Cliquez ou glissez des fichiers ici pour les téléverser",
 			promptSingle: "Cliquez ou glissez un fichier ici pour le téléverser",
@@ -1736,6 +1742,7 @@ const he = {
 		dialog: { close: "סגירת חלון" },
 		drawer: { close: "סגירת לוח" },
 		dropdown: { placeholder: "בחר…" },
+		fieldLabel: { help: (label) => `מידע נוסף על ${label}` },
 		fileUploader: {
 			prompt: "לחץ או גרור קבצים לכאן להעלאה",
 			promptSingle: "לחץ או גרור קובץ לכאן להעלאה",
@@ -1945,6 +1952,7 @@ const hi = {
 		dialog: { close: "संवाद बंद करें" },
 		drawer: { close: "पैनल बंद करें" },
 		dropdown: { placeholder: "चुनें…" },
+		fieldLabel: { help: (label) => `अधिक जानकारी: ${label}` },
 		fileUploader: {
 			prompt: "अपलोड करने के लिए फ़ाइलें यहाँ क्लिक करें या खींचें",
 			promptSingle: "अपलोड करने के लिए फ़ाइल यहाँ क्लिक करें या खींचें",
@@ -2154,6 +2162,7 @@ const is = {
 		dialog: { close: "Loka glugga" },
 		drawer: { close: "Loka spjaldi" },
 		dropdown: { placeholder: "Veldu…" },
+		fieldLabel: { help: (label) => `Nánari upplýsingar: ${label}` },
 		fileUploader: {
 			prompt: "Smelltu eða dragðu skrár hingað til að hlaða upp",
 			promptSingle: "Smelltu eða dragðu skrá hingað til að hlaða upp",
@@ -2363,6 +2372,7 @@ const nl = {
 		dialog: { close: "Dialoogvenster sluiten" },
 		drawer: { close: "Paneel sluiten" },
 		dropdown: { placeholder: "Selecteer…" },
+		fieldLabel: { help: (label) => `Meer informatie over ${label}` },
 		fileUploader: {
 			prompt: "Klik of sleep bestanden hierheen om te uploaden",
 			promptSingle: "Klik of sleep een bestand hierheen om te uploaden",
@@ -2572,6 +2582,7 @@ const pl = {
 		dialog: { close: "Zamknij okno dialogowe" },
 		drawer: { close: "Zamknij panel" },
 		dropdown: { placeholder: "Wybierz…" },
+		fieldLabel: { help: (label) => `Więcej informacji: ${label}` },
 		fileUploader: {
 			prompt: "Kliknij lub przeciągnij pliki tutaj, aby je przesłać",
 			promptSingle: "Kliknij lub przeciągnij plik tutaj, aby go przesłać",
@@ -2781,6 +2792,7 @@ const ptBR = {
 		dialog: { close: "Fechar diálogo" },
 		drawer: { close: "Fechar painel" },
 		dropdown: { placeholder: "Selecione…" },
+		fieldLabel: { help: (label) => `Mais informações sobre ${label}` },
 		fileUploader: {
 			prompt: "Clique ou arraste arquivos aqui para enviar",
 			promptSingle: "Clique ou arraste um arquivo aqui para enviar",
@@ -2990,6 +3002,7 @@ const ru = {
 		dialog: { close: "Закрыть диалог" },
 		drawer: { close: "Закрыть панель" },
 		dropdown: { placeholder: "Выберите…" },
+		fieldLabel: { help: (label) => `Подробнее: ${label}` },
 		fileUploader: {
 			prompt: "Нажмите или перетащите файлы сюда для загрузки",
 			promptSingle: "Нажмите или перетащите файл сюда для загрузки",
@@ -3199,6 +3212,7 @@ const uk = {
 		dialog: { close: "Закрити діалог" },
 		drawer: { close: "Закрити панель" },
 		dropdown: { placeholder: "Виберіть…" },
+		fieldLabel: { help: (label) => `Докладніше: ${label}` },
 		fileUploader: {
 			prompt: "Натисніть або перетягніть файли сюди для завантаження",
 			promptSingle: "Натисніть або перетягніть файл сюди для завантаження",
@@ -3408,6 +3422,7 @@ const zhCN = {
 		dialog: { close: "关闭对话框" },
 		drawer: { close: "关闭面板" },
 		dropdown: { placeholder: "请选择…" },
+		fieldLabel: { help: (label) => `关于 ${label} 的更多信息` },
 		fileUploader: {
 			prompt: "点击或拖动文件到此处上传",
 			promptSingle: "点击或拖动文件到此处上传",
@@ -3654,15 +3669,16 @@ var AccordionComponent = class AccordionComponent {
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : 	/* istanbul ignore next */ []);
 	highlightExpanded = input(false, ...ngDevMode ? [{ debugName: "highlightExpanded" }] : 	/* istanbul ignore next */ []);
-	expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : 	/* istanbul ignore next */ []);
+	expandedValues = model([], ...ngDevMode ? [{ debugName: "expandedValues" }] : 	/* istanbul ignore next */ []);
+	expandedItems = linkedSignal(() => new Set(this.expandedValues()), ...ngDevMode ? [{ debugName: "expandedItems" }] : 	/* istanbul ignore next */ []);
 	registeredItems = signal([], ...ngDevMode ? [{ debugName: "registeredItems" }] : 	/* istanbul ignore next */ []);
 	constructor() {
 		effect(() => {
 			if (this.multi()) return;
-			const expanded = untracked(this.expandedItems);
-			if (expanded.size <= 1) return;
-			const first = untracked(this.registeredItems).find((item) => expanded.has(item.value()));
-			this.expandedItems.set(new Set(first ? [first.value()] : []));
+			const expanded = this.expandedValues();
+			if (expanded.length <= 1) return;
+			const first = this.registeredItems().find((item) => expanded.includes(item.value()));
+			if (first) this.expandedValues.set([first.value()]);
 		});
 	}
 	registerItem(item) {
@@ -3672,14 +3688,13 @@ var AccordionComponent = class AccordionComponent {
 		this.registeredItems.update((items) => items.filter((i) => i !== item));
 	}
 	toggle(value) {
-		const current = this.expandedItems();
-		const next = new Set(current);
+		const next = new Set(this.expandedItems());
 		if (next.has(value)) next.delete(value);
 		else {
 			if (!this.multi()) next.clear();
 			next.add(value);
 		}
-		this.expandedItems.set(next);
+		this.expandedValues.set([...next]);
 	}
 	isExpanded(value) {
 		return this.expandedItems().has(value);
@@ -3726,8 +3741,16 @@ var AccordionComponent = class AccordionComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			expandedValues: {
+				classPropertyName: "expandedValues",
+				publicName: "expandedValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
+		outputs: { expandedValues: "expandedValuesChange" },
 		ngImport: i0,
 		template: ` <div class="ea-accordion"><ng-content /></div> `,
 		isInline: true,
@@ -3782,6 +3805,17 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "highlightExpanded",
 				required: false
 			}]
+		}],
+		expandedValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandedValues",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedValuesChange"]
 		}]
 	}
 });
@@ -3933,7 +3967,7 @@ function uniqueId(prefix) {
 var AccordionItemComponent = class AccordionItemComponent {
 	accordion = inject(AccordionComponent);
 	value = input.required(...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
-	label = input.required(...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
 	id = input(uniqueId("ea-accordion-item"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
@@ -3977,7 +4011,7 @@ var AccordionItemComponent = class AccordionItemComponent {
 				classPropertyName: "label",
 				publicName: "label",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
 				transformFunction: null
 			},
 			icon: {
@@ -4003,7 +4037,7 @@ var AccordionItemComponent = class AccordionItemComponent {
 			}
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">\n        <ng-content select=\"[slot=label]\">{{ label() }}</ng-content>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
 		styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
 		dependencies: [{
 			kind: "component",
@@ -4037,7 +4071,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ea-accordion-item",
 			imports: [ChevronDownIconComponent, NgComponentOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">\n        <ng-content select=\"[slot=label]\">{{ label() }}</ng-content>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
 			styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
 		}]
 	}],
@@ -4055,7 +4089,7 @@ i0.ɵɵngDeclareClassMetadata({
 			args: [{
 				isSignal: true,
 				alias: "label",
-				required: true
+				required: false
 			}]
 		}],
 		icon: [{
@@ -4442,14 +4476,22 @@ var AlertComponent = class AlertComponent {
 	dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : 	/* istanbul ignore next */ []);
 	visible = model(true, ...ngDevMode ? [{ debugName: "visible" }] : 	/* istanbul ignore next */ []);
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
+	live = input("auto", ...ngDevMode ? [{ debugName: "live" }] : 	/* istanbul ignore next */ []);
 	dismissed = output();
 	alertClasses = computed(() => ({
 		[`ea-alert--${this.variant()}`]: true,
 		[`ea-alert--${this.size()}`]: true
 	}), ...ngDevMode ? [{ debugName: "alertClasses" }] : 	/* istanbul ignore next */ []);
 	role = computed(() => {
-		const v = this.variant();
-		return v === "error" || v === "warning" ? "alert" : "status";
+		switch (this.live()) {
+			case "assertive": return "alert";
+			case "polite": return "status";
+			case "off": return null;
+			default: {
+				const v = this.variant();
+				return v === "error" || v === "warning" ? "alert" : "status";
+			}
+		}
 	}, ...ngDevMode ? [{ debugName: "role" }] : 	/* istanbul ignore next */ []);
 	dismiss() {
 		this.visible.set(false);
@@ -4504,6 +4546,13 @@ var AlertComponent = class AlertComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -4624,18 +4673,275 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
+		}],
 		dismissed: [{
 			type: i0.Output,
 			args: ["dismissed"]
 		}]
 	}
 });
+var PointerPressTracker = class PointerPressTracker {
+	downTarget = null;
+	upTarget = null;
+	pressing = false;
+	pressEndCallbacks = /* @__PURE__ */ new Set();
+	onDown = (event) => {
+		this.downTarget = event.target;
+		this.upTarget = null;
+		this.pressing = true;
+	};
+	onUp = (event) => {
+		this.upTarget = event.target;
+	};
+	onPressEnd = () => {
+		this.pressing = false;
+		const callbacks = [...this.pressEndCallbacks];
+		this.pressEndCallbacks.clear();
+		callbacks.forEach((callback) => callback());
+	};
+	onKeydown = () => {
+		this.downTarget = null;
+		this.upTarget = null;
+		this.onPressEnd();
+	};
+	constructor() {
+		if (typeof document === "undefined") return;
+		document.addEventListener("pointerdown", this.onDown, true);
+		document.addEventListener("pointerup", this.onUp, true);
+		document.addEventListener("click", this.onPressEnd, true);
+		document.addEventListener("pointercancel", this.onPressEnd, true);
+		document.addEventListener("keydown", this.onKeydown, true);
+		inject(DestroyRef).onDestroy(() => {
+			document.removeEventListener("pointerdown", this.onDown, true);
+			document.removeEventListener("pointerup", this.onUp, true);
+			document.removeEventListener("click", this.onPressEnd, true);
+			document.removeEventListener("pointercancel", this.onPressEnd, true);
+			document.removeEventListener("keydown", this.onKeydown, true);
+		});
+	}
+	touchedInside(el) {
+		if (!el) return false;
+		return this.downTarget !== null && el.contains(this.downTarget) || this.upTarget !== null && el.contains(this.upTarget);
+	}
+	stayedOn(el) {
+		if (!el) return false;
+		return (this.downTarget === null || this.downTarget === el) && (this.upTarget === null || this.upTarget === el);
+	}
+	whenPressEnds(callback) {
+		if (!this.pressing) {
+			callback();
+			return () => void 0;
+		}
+		this.pressEndCallbacks.add(callback);
+		return () => this.pressEndCallbacks.delete(callback);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PointerPressTracker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PointerPressTracker,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PointerPressTracker,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+function isCardinal(placement) {
+	return placement === "top" || placement === "bottom" || placement === "left" || placement === "right";
+}
+function side(placement) {
+	if (placement.startsWith("top")) return "top";
+	if (placement.startsWith("bottom")) return "bottom";
+	if (placement === "left") return "left";
+	return "right";
+}
+function flipPlacement(placement) {
+	if (placement === "top") return "bottom";
+	if (placement === "bottom") return "top";
+	if (placement === "left") return "right";
+	if (placement === "right") return "left";
+	if (placement === "top-start") return "bottom-start";
+	if (placement === "top-end") return "bottom-end";
+	if (placement === "bottom-start") return "top-start";
+	return "top-end";
+}
+function placeRaw(anchor, popover, placement, offset, rtl) {
+	const s = side(placement);
+	let top = 0;
+	let left = 0;
+	if (s === "top") top = anchor.top - popover.height - offset;
+	else if (s === "bottom") top = anchor.bottom + offset;
+	else if (s === "left") left = anchor.left - popover.width - offset;
+	else left = anchor.right + offset;
+	if (s === "top" || s === "bottom") if (isCardinal(placement)) left = anchor.left + (anchor.width - popover.width) / 2;
+	else left = (placement === "top-start" || placement === "bottom-start") !== rtl ? anchor.left : anchor.right - popover.width;
+	else top = anchor.top + (anchor.height - popover.height) / 2;
+	return {
+		top,
+		left
+	};
+}
+function computePopoverPosition(anchorRect, popoverRect, viewport, options) {
+	const offset = options.offset ?? 4;
+	const margin = options.margin ?? 8;
+	const flip = options.flip ?? true;
+	const clamp = options.clamp ?? true;
+	const rtl = options.rtl ?? false;
+	let placement = options.placement;
+	let pos = placeRaw(anchorRect, popoverRect, placement, offset, rtl);
+	if (flip) {
+		const overflowsTop = pos.top < margin;
+		const overflowsBottom = pos.top + popoverRect.height > viewport.height - margin;
+		const overflowsLeft = pos.left < margin;
+		const overflowsRight = pos.left + popoverRect.width > viewport.width - margin;
+		const s = side(placement);
+		if (s === "top" && overflowsTop || s === "bottom" && overflowsBottom || s === "left" && overflowsLeft || s === "right" && overflowsRight) {
+			const flipped = flipPlacement(placement);
+			const flippedPos = placeRaw(anchorRect, popoverRect, flipped, offset, rtl);
+			if (s === "top" && flippedPos.top + popoverRect.height <= viewport.height - margin || s === "bottom" && flippedPos.top >= margin || s === "left" && flippedPos.left + popoverRect.width <= viewport.width - margin || s === "right" && flippedPos.left >= margin) {
+				placement = flipped;
+				pos = flippedPos;
+			}
+		}
+	}
+	if (clamp) {
+		const s = side(placement);
+		if (s === "top" || s === "bottom") {
+			const maxLeft = viewport.width - popoverRect.width - margin;
+			pos = {
+				top: pos.top,
+				left: Math.max(margin, Math.min(pos.left, Math.max(margin, maxLeft)))
+			};
+		} else {
+			const maxTop = viewport.height - popoverRect.height - margin;
+			pos = {
+				top: Math.max(margin, Math.min(pos.top, Math.max(margin, maxTop))),
+				left: pos.left
+			};
+		}
+	}
+	return {
+		top: pos.top,
+		left: pos.left,
+		placement,
+		anchorWidth: anchorRect.width,
+		...options.matchAnchorWidth ? { width: anchorRect.width } : {}
+	};
+}
+const HELP_GAP = 4;
+const HELP_VIEWPORT_MARGIN = 8;
 var FieldLabelComponent = class FieldLabelComponent {
+	i18n = inject(EagamiI18nService);
+	press = inject(PointerPressTracker);
+	renderer = inject(Renderer2);
 	text = input.required(...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
+	help = input(void 0, ...ngDevMode ? [{ debugName: "help" }] : 	/* istanbul ignore next */ []);
 	forId = input(void 0, ...ngDevMode ? [{ debugName: "forId" }] : 	/* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : 	/* istanbul ignore next */ []);
 	labelId = input(void 0, ...ngDevMode ? [{ debugName: "labelId" }] : 	/* istanbul ignore next */ []);
+	helpOpen = linkedSignal({
+		...ngDevMode ? { debugName: "helpOpen" } : 		/* istanbul ignore next */ {},
+		source: this.help,
+		computation: () => false
+	});
+	helpId = uniqueId("ea-field-label-help");
+	helpTemplate = computed(() => {
+		const help = this.help();
+		return help instanceof TemplateRef ? help : null;
+	}, ...ngDevMode ? [{ debugName: "helpTemplate" }] : 	/* istanbul ignore next */ []);
+	helpTriggerLabel = computed(() => this.i18n.messages().fieldLabel.help(this.text()), ...ngDevMode ? [{ debugName: "helpTriggerLabel" }] : 	/* istanbul ignore next */ []);
+	helpEl = viewChild("helpEl", ...ngDevMode ? [{ debugName: "helpEl" }] : 	/* istanbul ignore next */ []);
+	helpTrigger = viewChild("helpTrigger", ...ngDevMode ? [{ debugName: "helpTrigger" }] : 	/* istanbul ignore next */ []);
+	helpBubble = viewChild("helpBubble", ...ngDevMode ? [{ debugName: "helpBubble" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect((onCleanup) => {
+			const help = this.helpEl()?.nativeElement;
+			const trigger = this.helpTrigger()?.nativeElement;
+			const bubble = this.helpBubble()?.nativeElement;
+			if (help && trigger && bubble) onCleanup(this.attachHelpBubble(help, trigger, bubble));
+		});
+	}
+	toggleHelp() {
+		this.helpOpen.update((open) => !open);
+	}
+	onHelpFocusout(event) {
+		const next = event.relatedTarget;
+		if (next instanceof Node && !this.helpEl()?.nativeElement.contains(next)) this.helpOpen.set(false);
+	}
+	attachHelpBubble(help, trigger, bubble) {
+		if (typeof bubble.showPopover === "function") try {
+			bubble.showPopover();
+		} catch {
+			bubble.removeAttribute("popover");
+		}
+		const place = () => {
+			const { width, height } = bubble.getBoundingClientRect();
+			const { top, left } = computePopoverPosition(trigger.getBoundingClientRect(), {
+				width,
+				height
+			}, {
+				width: document.documentElement.clientWidth,
+				height: document.documentElement.clientHeight
+			}, {
+				placement: "top",
+				offset: HELP_GAP,
+				margin: HELP_VIEWPORT_MARGIN
+			});
+			this.renderer.setStyle(bubble, "top", `${top}px`);
+			this.renderer.setStyle(bubble, "left", `${left}px`);
+		};
+		const onClick = (event) => {
+			const target = event.target;
+			if (target instanceof Node && help.contains(target) || this.press.touchedInside(help)) return;
+			this.helpOpen.set(false);
+		};
+		const onKeydown = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (bubble.contains(document.activeElement)) trigger.focus();
+			this.helpOpen.set(false);
+		};
+		const scrollOptions = {
+			capture: true,
+			passive: true
+		};
+		place();
+		document.addEventListener("click", onClick);
+		document.addEventListener("keydown", onKeydown, true);
+		window.addEventListener("scroll", place, scrollOptions);
+		window.addEventListener("resize", place);
+		return () => {
+			document.removeEventListener("click", onClick);
+			document.removeEventListener("keydown", onKeydown, true);
+			window.removeEventListener("scroll", place, scrollOptions);
+			window.removeEventListener("resize", place);
+		};
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.0",
@@ -4665,6 +4971,13 @@ var FieldLabelComponent = class FieldLabelComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			help: {
+				classPropertyName: "help",
+				publicName: "help",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			forId: {
 				classPropertyName: "forId",
 				publicName: "forId",
@@ -4687,32 +5000,63 @@ var FieldLabelComponent = class FieldLabelComponent {
 				transformFunction: null
 			}
 		},
+		viewQueries: [
+			{
+				propertyName: "helpEl",
+				first: true,
+				predicate: ["helpEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "helpTrigger",
+				first: true,
+				predicate: ["helpTrigger"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "helpBubble",
+				first: true,
+				predicate: ["helpBubble"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "@if (forId(); as control) {\n  <label\n    class=\"ea-field-label\"\n    [for]=\"control\"\n    [attr.id]=\"labelId() ?? null\"\n    [class.ea-field-label--required]=\"required()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </label>\n} @else {\n  <span\n    class=\"ea-field-label\"\n    [attr.id]=\"labelId() ?? null\"\n    [class.ea-field-label--required]=\"required()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </span>\n}\n\n<ng-template #content>\n  @if (icon(); as iconComponent) {\n    <span\n      class=\"ea-field-label__icon\"\n      aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    </span>\n  }\n  {{ text() }}\n</ng-template>\n",
-		styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{content:\" *\";color:var(--color-error-default)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}\n"],
-		dependencies: [{
-			kind: "directive",
-			type: NgComponentOutlet,
-			selector: "[ngComponentOutlet]",
-			inputs: [
-				"ngComponentOutlet",
-				"ngComponentOutletInputs",
-				"ngComponentOutletInjector",
-				"ngComponentOutletEnvironmentInjector",
-				"ngComponentOutletContent",
-				"ngComponentOutletNgModule"
-			],
-			exportAs: ["ngComponentOutlet"]
-		}, {
-			kind: "directive",
-			type: NgTemplateOutlet,
-			selector: "[ngTemplateOutlet]",
-			inputs: [
-				"ngTemplateOutletContext",
-				"ngTemplateOutlet",
-				"ngTemplateOutletInjector"
-			]
-		}],
+		template: "@if (help(); as helpContent) {\n  <span class=\"ea-field-label-row\">\n    <ng-container [ngTemplateOutlet]=\"label\" />\n    <span\n      #helpEl\n      class=\"ea-field-label__help\"\n      (focusout)=\"onHelpFocusout($event)\">\n      <button\n        #helpTrigger\n        type=\"button\"\n        class=\"ea-field-label__help-trigger\"\n        [attr.aria-label]=\"helpTriggerLabel()\"\n        [attr.aria-expanded]=\"helpOpen()\"\n        [attr.aria-controls]=\"helpId\"\n        (click)=\"toggleHelp()\">\n        <ea-icon-info />\n      </button>\n      <span\n        role=\"status\"\n        [id]=\"helpId\">\n        @if (helpOpen()) {\n          <span\n            #helpBubble\n            class=\"ea-field-label__help-bubble\"\n            popover=\"manual\">\n            @if (helpTemplate(); as template) {\n              <ng-container [ngTemplateOutlet]=\"template\" />\n            } @else {\n              {{ helpContent }}\n            }\n          </span>\n        }\n      </span>\n    </span>\n  </span>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n  @if (forId(); as control) {\n    <label\n      class=\"ea-field-label\"\n      [for]=\"control\"\n      [attr.id]=\"labelId() ?? null\"\n      [class.ea-field-label--required]=\"required()\">\n      <ng-container [ngTemplateOutlet]=\"content\" />\n    </label>\n  } @else {\n    <span\n      class=\"ea-field-label\"\n      [attr.id]=\"labelId() ?? null\"\n      [class.ea-field-label--required]=\"required()\">\n      <ng-container [ngTemplateOutlet]=\"content\" />\n    </span>\n  }\n</ng-template>\n\n<ng-template #content>\n  @if (icon(); as iconComponent) {\n    <span\n      class=\"ea-field-label__icon\"\n      aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    </span>\n  }\n  {{ text() }}\n</ng-template>\n",
+		styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{content:\" *\";color:var(--color-error-default)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: InfoIconComponent,
+				selector: "ea-icon-info"
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -4726,11 +5070,16 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ea-field-label",
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			imports: [NgComponentOutlet, NgTemplateOutlet],
-			template: "@if (forId(); as control) {\n  <label\n    class=\"ea-field-label\"\n    [for]=\"control\"\n    [attr.id]=\"labelId() ?? null\"\n    [class.ea-field-label--required]=\"required()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </label>\n} @else {\n  <span\n    class=\"ea-field-label\"\n    [attr.id]=\"labelId() ?? null\"\n    [class.ea-field-label--required]=\"required()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </span>\n}\n\n<ng-template #content>\n  @if (icon(); as iconComponent) {\n    <span\n      class=\"ea-field-label__icon\"\n      aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    </span>\n  }\n  {{ text() }}\n</ng-template>\n",
-			styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{content:\" *\";color:var(--color-error-default)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}\n"]
+			imports: [
+				InfoIconComponent,
+				NgComponentOutlet,
+				NgTemplateOutlet
+			],
+			template: "@if (help(); as helpContent) {\n  <span class=\"ea-field-label-row\">\n    <ng-container [ngTemplateOutlet]=\"label\" />\n    <span\n      #helpEl\n      class=\"ea-field-label__help\"\n      (focusout)=\"onHelpFocusout($event)\">\n      <button\n        #helpTrigger\n        type=\"button\"\n        class=\"ea-field-label__help-trigger\"\n        [attr.aria-label]=\"helpTriggerLabel()\"\n        [attr.aria-expanded]=\"helpOpen()\"\n        [attr.aria-controls]=\"helpId\"\n        (click)=\"toggleHelp()\">\n        <ea-icon-info />\n      </button>\n      <span\n        role=\"status\"\n        [id]=\"helpId\">\n        @if (helpOpen()) {\n          <span\n            #helpBubble\n            class=\"ea-field-label__help-bubble\"\n            popover=\"manual\">\n            @if (helpTemplate(); as template) {\n              <ng-container [ngTemplateOutlet]=\"template\" />\n            } @else {\n              {{ helpContent }}\n            }\n          </span>\n        }\n      </span>\n    </span>\n  </span>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"label\" />\n}\n\n<ng-template #label>\n  @if (forId(); as control) {\n    <label\n      class=\"ea-field-label\"\n      [for]=\"control\"\n      [attr.id]=\"labelId() ?? null\"\n      [class.ea-field-label--required]=\"required()\">\n      <ng-container [ngTemplateOutlet]=\"content\" />\n    </label>\n  } @else {\n    <span\n      class=\"ea-field-label\"\n      [attr.id]=\"labelId() ?? null\"\n      [class.ea-field-label--required]=\"required()\">\n      <ng-container [ngTemplateOutlet]=\"content\" />\n    </span>\n  }\n</ng-template>\n\n<ng-template #content>\n  @if (icon(); as iconComponent) {\n    <span\n      class=\"ea-field-label__icon\"\n      aria-hidden=\"true\">\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    </span>\n  }\n  {{ text() }}\n</ng-template>\n",
+			styles: [":host{display:contents}.ea-field-label{font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-field-label--required:after{content:\" *\";color:var(--color-error-default)}.ea-field-label__icon{display:inline-flex;vertical-align:-.125em;margin-inline-end:.25em}.ea-field-label-row{display:flex;align-items:flex-start;gap:.25em}.ea-field-label__help{position:relative;flex:none;width:1.5em;height:calc(var(--text-label-md-lh) * 1em);font-size:max(var(--ea-field-label-size, var(--text-label-md-size)),.75rem)}.ea-field-label__help-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-field-label__help-trigger>*{font-size:1.25em}.ea-field-label__help-trigger:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-field-label__help-trigger:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-field-label__help-trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-field-label__help-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-field-label__help-trigger:disabled{cursor:default;opacity:.5}.ea-field-label__help-trigger{position:absolute;top:50%;left:50%;font-size:.8125em;transform:translate(-50%,-50%)}.ea-field-label__help-bubble{z-index:var(--z-index-tooltip);position:fixed;inset:0 auto auto 0;overflow:auto;box-sizing:border-box;max-width:min(20rem,100vw - 2 * var(--space-2));max-height:calc(100dvh - 2 * var(--space-2));padding:var(--space-2) var(--space-3);margin:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:start;font-family:var(--font-family-sans);overflow-wrap:break-word;border:var(--border-width-thin) solid var(--color-tooltip-border);border-radius:var(--radius-md);background-color:var(--color-tooltip-surface);color:var(--color-neutral-0);animation:ea-field-label-help-in var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-field-label__help-bubble{border:1px solid CanvasText}}@keyframes ea-field-label-help-in{0%{opacity:0}to{opacity:1}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		text: [{
 			type: i0.Input,
@@ -4748,6 +5097,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		help: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "help",
+				required: false
+			}]
+		}],
 		forId: [{
 			type: i0.Input,
 			args: [{
@@ -4771,6 +5128,18 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "labelId",
 				required: false
 			}]
+		}],
+		helpEl: [{
+			type: i0.ViewChild,
+			args: ["helpEl", { isSignal: true }]
+		}],
+		helpTrigger: [{
+			type: i0.ViewChild,
+			args: ["helpTrigger", { isSignal: true }]
+		}],
+		helpBubble: [{
+			type: i0.ViewChild,
+			args: ["helpBubble", { isSignal: true }]
 		}]
 	}
 });
@@ -4868,88 +5237,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var PointerPressTracker = class PointerPressTracker {
-	downTarget = null;
-	upTarget = null;
-	pressing = false;
-	pressEndCallbacks = /* @__PURE__ */ new Set();
-	onDown = (event) => {
-		this.downTarget = event.target;
-		this.upTarget = null;
-		this.pressing = true;
-	};
-	onUp = (event) => {
-		this.upTarget = event.target;
-	};
-	onPressEnd = () => {
-		this.pressing = false;
-		const callbacks = [...this.pressEndCallbacks];
-		this.pressEndCallbacks.clear();
-		callbacks.forEach((callback) => callback());
-	};
-	onKeydown = () => {
-		this.downTarget = null;
-		this.upTarget = null;
-		this.onPressEnd();
-	};
-	constructor() {
-		if (typeof document === "undefined") return;
-		document.addEventListener("pointerdown", this.onDown, true);
-		document.addEventListener("pointerup", this.onUp, true);
-		document.addEventListener("click", this.onPressEnd, true);
-		document.addEventListener("pointercancel", this.onPressEnd, true);
-		document.addEventListener("keydown", this.onKeydown, true);
-		inject(DestroyRef).onDestroy(() => {
-			document.removeEventListener("pointerdown", this.onDown, true);
-			document.removeEventListener("pointerup", this.onUp, true);
-			document.removeEventListener("click", this.onPressEnd, true);
-			document.removeEventListener("pointercancel", this.onPressEnd, true);
-			document.removeEventListener("keydown", this.onKeydown, true);
-		});
-	}
-	touchedInside(el) {
-		if (!el) return false;
-		return this.downTarget !== null && el.contains(this.downTarget) || this.upTarget !== null && el.contains(this.upTarget);
-	}
-	stayedOn(el) {
-		if (!el) return false;
-		return (this.downTarget === null || this.downTarget === el) && (this.upTarget === null || this.upTarget === el);
-	}
-	whenPressEnds(callback) {
-		if (!this.pressing) {
-			callback();
-			return () => void 0;
-		}
-		this.pressEndCallbacks.add(callback);
-		return () => this.pressEndCallbacks.delete(callback);
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.0",
-		ngImport: i0,
-		type: PointerPressTracker,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.2.0",
-		ngImport: i0,
-		type: PointerPressTracker,
-		providedIn: "root"
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.0",
-	ngImport: i0,
-	type: PointerPressTracker,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => []
-});
 function controlErrorStateFrom(control, config) {
 	const i18n = inject(EagamiI18nService);
 	const press = inject(PointerPressTracker);
@@ -5047,88 +5334,6 @@ function leaveTopLayer(surface) {
 	if (surface.isConnected && isPromoted(surface)) surface.hidePopover();
 	surface.removeAttribute("popover");
 }
-function isCardinal(placement) {
-	return placement === "top" || placement === "bottom" || placement === "left" || placement === "right";
-}
-function side(placement) {
-	if (placement.startsWith("top")) return "top";
-	if (placement.startsWith("bottom")) return "bottom";
-	if (placement === "left") return "left";
-	return "right";
-}
-function flipPlacement(placement) {
-	if (placement === "top") return "bottom";
-	if (placement === "bottom") return "top";
-	if (placement === "left") return "right";
-	if (placement === "right") return "left";
-	if (placement === "top-start") return "bottom-start";
-	if (placement === "top-end") return "bottom-end";
-	if (placement === "bottom-start") return "top-start";
-	return "top-end";
-}
-function placeRaw(anchor, popover, placement, offset, rtl) {
-	const s = side(placement);
-	let top = 0;
-	let left = 0;
-	if (s === "top") top = anchor.top - popover.height - offset;
-	else if (s === "bottom") top = anchor.bottom + offset;
-	else if (s === "left") left = anchor.left - popover.width - offset;
-	else left = anchor.right + offset;
-	if (s === "top" || s === "bottom") if (isCardinal(placement)) left = anchor.left + (anchor.width - popover.width) / 2;
-	else left = (placement === "top-start" || placement === "bottom-start") !== rtl ? anchor.left : anchor.right - popover.width;
-	else top = anchor.top + (anchor.height - popover.height) / 2;
-	return {
-		top,
-		left
-	};
-}
-function computePopoverPosition(anchorRect, popoverRect, viewport, options) {
-	const offset = options.offset ?? 4;
-	const margin = options.margin ?? 8;
-	const flip = options.flip ?? true;
-	const clamp = options.clamp ?? true;
-	const rtl = options.rtl ?? false;
-	let placement = options.placement;
-	let pos = placeRaw(anchorRect, popoverRect, placement, offset, rtl);
-	if (flip) {
-		const overflowsTop = pos.top < margin;
-		const overflowsBottom = pos.top + popoverRect.height > viewport.height - margin;
-		const overflowsLeft = pos.left < margin;
-		const overflowsRight = pos.left + popoverRect.width > viewport.width - margin;
-		const s = side(placement);
-		if (s === "top" && overflowsTop || s === "bottom" && overflowsBottom || s === "left" && overflowsLeft || s === "right" && overflowsRight) {
-			const flipped = flipPlacement(placement);
-			const flippedPos = placeRaw(anchorRect, popoverRect, flipped, offset, rtl);
-			if (s === "top" && flippedPos.top + popoverRect.height <= viewport.height - margin || s === "bottom" && flippedPos.top >= margin || s === "left" && flippedPos.left + popoverRect.width <= viewport.width - margin || s === "right" && flippedPos.left >= margin) {
-				placement = flipped;
-				pos = flippedPos;
-			}
-		}
-	}
-	if (clamp) {
-		const s = side(placement);
-		if (s === "top" || s === "bottom") {
-			const maxLeft = viewport.width - popoverRect.width - margin;
-			pos = {
-				top: pos.top,
-				left: Math.max(margin, Math.min(pos.left, Math.max(margin, maxLeft)))
-			};
-		} else {
-			const maxTop = viewport.height - popoverRect.height - margin;
-			pos = {
-				top: Math.max(margin, Math.min(pos.top, Math.max(margin, maxTop))),
-				left: pos.left
-			};
-		}
-	}
-	return {
-		top: pos.top,
-		left: pos.left,
-		placement,
-		anchorWidth: anchorRect.width,
-		...options.matchAnchorWidth ? { width: anchorRect.width } : {}
-	};
-}
 var PopoverComponent = class PopoverComponent {
 	destroyRef = inject(DestroyRef);
 	press = inject(PointerPressTracker);
@@ -5722,6 +5927,7 @@ var AutocompleteComponent = class AutocompleteComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
@@ -5733,6 +5939,7 @@ var AutocompleteComponent = class AutocompleteComponent {
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
 	minLength = input(0, ...ngDevMode ? [{ debugName: "minLength" }] : 	/* istanbul ignore next */ []);
+	maxLength = input(void 0, ...ngDevMode ? [{ debugName: "maxLength" }] : 	/* istanbul ignore next */ []);
 	maxResults = input(10, ...ngDevMode ? [{ debugName: "maxResults" }] : 	/* istanbul ignore next */ []);
 	emptyMessage = input(void 0, ...ngDevMode ? [{ debugName: "emptyMessage" }] : 	/* istanbul ignore next */ []);
 	id = input(uniqueId("ea-autocomplete"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
@@ -5897,6 +6104,13 @@ var AutocompleteComponent = class AutocompleteComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -5974,6 +6188,13 @@ var AutocompleteComponent = class AutocompleteComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			maxLength: {
+				classPropertyName: "maxLength",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			maxResults: {
 				classPropertyName: "maxResults",
 				publicName: "maxResults",
@@ -6023,7 +6244,7 @@ var AutocompleteComponent = class AutocompleteComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #anchorEl\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      dir=\"auto\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-expanded]=\"showList()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (group of renderedGroups(); track $index) {\n        <div\n          class=\"ea-autocomplete__group\"\n          [class.ea-autocomplete__group--ruled]=\"group.rule\"\n          [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n          [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label; as groupLabel) {\n            <div\n              class=\"ea-autocomplete__group-label\"\n              aria-hidden=\"true\">\n              {{ groupLabel }}\n            </div>\n          }\n          @for (entry of group.options; track entry.option.value) {\n            <div\n              class=\"ea-autocomplete__option\"\n              role=\"option\"\n              [id]=\"id() + '-option-' + entry.index\"\n              [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n              [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n              [attr.aria-selected]=\"entry.index === selectedIndex()\"\n              [attr.aria-disabled]=\"entry.option.disabled || null\"\n              (mousedown)=\"selectOption(entry.option)\"\n              (mouseenter)=\"focusedIndex.set(entry.index)\">\n              {{ entry.option.label }}\n            </div>\n          }\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-autocomplete ea-autocomplete--{{ 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    #anchorEl\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      dir=\"auto\"\n      autocomplete=\"off\"\n      role=\"combobox\"\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()\"\n      [attr.aria-expanded]=\"showList()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (group of renderedGroups(); track $index) {\n        <div\n          class=\"ea-autocomplete__group\"\n          [class.ea-autocomplete__group--ruled]=\"group.rule\"\n          [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n          [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label; as groupLabel) {\n            <div\n              class=\"ea-autocomplete__group-label\"\n              aria-hidden=\"true\">\n              {{ groupLabel }}\n            </div>\n          }\n          @for (entry of group.options; track entry.option.value) {\n            <div\n              class=\"ea-autocomplete__option\"\n              role=\"option\"\n              [id]=\"id() + '-option-' + entry.index\"\n              [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n              [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n              [attr.aria-selected]=\"entry.index === selectedIndex()\"\n              [attr.aria-disabled]=\"entry.option.disabled || null\"\n              (mousedown)=\"selectOption(entry.option)\"\n              (mouseenter)=\"focusedIndex.set(entry.index)\">\n              {{ entry.option.label }}\n            </div>\n          }\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"],
 		dependencies: [
 			{
@@ -6033,6 +6254,7 @@ var AutocompleteComponent = class AutocompleteComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -6103,7 +6325,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => AutocompleteComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #anchorEl\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      dir=\"auto\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-expanded]=\"showList()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (group of renderedGroups(); track $index) {\n        <div\n          class=\"ea-autocomplete__group\"\n          [class.ea-autocomplete__group--ruled]=\"group.rule\"\n          [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n          [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label; as groupLabel) {\n            <div\n              class=\"ea-autocomplete__group-label\"\n              aria-hidden=\"true\">\n              {{ groupLabel }}\n            </div>\n          }\n          @for (entry of group.options; track entry.option.value) {\n            <div\n              class=\"ea-autocomplete__option\"\n              role=\"option\"\n              [id]=\"id() + '-option-' + entry.index\"\n              [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n              [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n              [attr.aria-selected]=\"entry.index === selectedIndex()\"\n              [attr.aria-disabled]=\"entry.option.disabled || null\"\n              (mousedown)=\"selectOption(entry.option)\"\n              (mouseenter)=\"focusedIndex.set(entry.index)\">\n              {{ entry.option.label }}\n            </div>\n          }\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-autocomplete ea-autocomplete--{{ 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    #anchorEl\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      dir=\"auto\"\n      autocomplete=\"off\"\n      role=\"combobox\"\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()\"\n      [attr.aria-expanded]=\"showList()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (group of renderedGroups(); track $index) {\n        <div\n          class=\"ea-autocomplete__group\"\n          [class.ea-autocomplete__group--ruled]=\"group.rule\"\n          [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n          [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label; as groupLabel) {\n            <div\n              class=\"ea-autocomplete__group-label\"\n              aria-hidden=\"true\">\n              {{ groupLabel }}\n            </div>\n          }\n          @for (entry of group.options; track entry.option.value) {\n            <div\n              class=\"ea-autocomplete__option\"\n              role=\"option\"\n              [id]=\"id() + '-option-' + entry.index\"\n              [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n              [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n              [attr.aria-selected]=\"entry.index === selectedIndex()\"\n              [attr.aria-disabled]=\"entry.option.disabled || null\"\n              (mousedown)=\"selectOption(entry.option)\"\n              (mouseenter)=\"focusedIndex.set(entry.index)\">\n              {{ entry.option.label }}\n            </div>\n          }\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"]
 		}]
 	}],
@@ -6128,6 +6350,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -6216,6 +6446,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
 		maxResults: [{
 			type: i0.Input,
 			args: [{
@@ -6947,6 +7185,7 @@ var TooltipDirective = class TooltipDirective {
 		this.renderer.addClass(this.tooltipEl, "ea-tooltip");
 		this.placedPosition = this.tooltipPosition();
 		this.renderer.addClass(this.tooltipEl, `ea-tooltip--${this.placedPosition}`);
+		if (this.controlled()) this.renderer.addClass(this.tooltipEl, "ea-tooltip--controlled");
 		this.renderer.setAttribute(this.tooltipEl, "role", "tooltip");
 		this.renderer.setAttribute(this.tooltipEl, "id", this.tooltipId);
 		const content = this.eaTooltip();
@@ -9573,6 +9812,17 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+function buttonClasses(state) {
+	return {
+		[`ea-button--${state.variant}`]: true,
+		[`ea-button--${state.size}`]: true,
+		[`ea-button--align-${state.align}`]: state.align !== "center",
+		"ea-button--full-width": state.fullWidth,
+		"ea-button--uppercase": state.uppercase,
+		"ea-button--loading": state.loading,
+		"ea-button--disabled": state.disabled
+	};
+}
 var ButtonComponent = class ButtonComponent {
 	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
@@ -9580,6 +9830,7 @@ var ButtonComponent = class ButtonComponent {
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
 	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : 	/* istanbul ignore next */ []);
 	fullWidth = input(false, ...ngDevMode ? [{ debugName: "fullWidth" }] : 	/* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : 	/* istanbul ignore next */ []);
 	uppercase = input(false, ...ngDevMode ? [{ debugName: "uppercase" }] : 	/* istanbul ignore next */ []);
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
@@ -9590,15 +9841,25 @@ var ButtonComponent = class ButtonComponent {
 		...ngDevMode ? { debugName: "ariaCurrent" } : 		/* istanbul ignore next */ {},
 		alias: "aria-current"
 	});
+	ariaLabelledby = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : 		/* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	ariaDescribedby = input(void 0, {
+		...ngDevMode ? { debugName: "ariaDescribedby" } : 		/* istanbul ignore next */ {},
+		alias: "aria-describedby"
+	});
+	buttonEl = viewChild("buttonEl", ...ngDevMode ? [{ debugName: "buttonEl" }] : 	/* istanbul ignore next */ []);
 	clicked = output();
 	isDisabled = computed(() => this.disabled() || this.loading(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
-	hostClasses = computed(() => ({
-		[`ea-button--${this.variant()}`]: true,
-		[`ea-button--${this.size()}`]: true,
-		"ea-button--full-width": this.fullWidth(),
-		"ea-button--uppercase": this.uppercase(),
-		"ea-button--loading": this.loading(),
-		"ea-button--disabled": this.isDisabled()
+	hostClasses = computed(() => buttonClasses({
+		variant: this.variant(),
+		size: this.size(),
+		align: this.align(),
+		fullWidth: this.fullWidth(),
+		uppercase: this.uppercase(),
+		loading: this.loading(),
+		disabled: this.isDisabled()
 	}), ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
 	handleClick(event) {
 		if (this.isDisabled()) {
@@ -9607,6 +9868,9 @@ var ButtonComponent = class ButtonComponent {
 		}
 		this.clicked.emit(event);
 	}
+	focus() {
+		this.buttonEl()?.nativeElement.focus();
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.0",
@@ -9664,6 +9928,13 @@ var ButtonComponent = class ButtonComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			uppercase: {
 				classPropertyName: "uppercase",
 				publicName: "uppercase",
@@ -9691,13 +9962,34 @@ var ButtonComponent = class ButtonComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedby: {
+				classPropertyName: "ariaDescribedby",
+				publicName: "aria-describedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { clicked: "clicked" },
 		host: { properties: { "class.ea-button--full-width": "fullWidth()" } },
+		viewQueries: [{
+			propertyName: "buttonEl",
+			first: true,
+			predicate: ["buttonEl"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n",
-		styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],
+		template: "<button\n  #buttonEl\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  [attr.aria-describedby]=\"ariaDescribedby() || null\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n",
+		styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--link{min-height:var(--ea-button-min-height, 0);padding:var(--ea-button-padding, 0);border-color:var(--ea-button-border-color, transparent);background-color:var(--ea-button-background-color, transparent);color:var(--ea-button-color, var(--color-text-link))}.ea-button--link:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, 0)}.ea-button--link:hover:not(.ea-button--disabled){border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:active:not(.ea-button--disabled){border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:hover:not(.ea-button--disabled) .ea-button__label,.ea-button--link:focus-visible .ea-button__label{text-decoration:underline}.ea-button--full-width{width:100%}.ea-button--align-start{justify-content:flex-start}.ea-button--align-end{justify-content:flex-end}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -9732,8 +10024,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [NgClass, NgComponentOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[class.ea-button--full-width]": "fullWidth()" },
-			template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n",
-			styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
+			template: "<button\n  #buttonEl\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  [attr.aria-describedby]=\"ariaDescribedby() || null\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n",
+			styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--link{min-height:var(--ea-button-min-height, 0);padding:var(--ea-button-padding, 0);border-color:var(--ea-button-border-color, transparent);background-color:var(--ea-button-background-color, transparent);color:var(--ea-button-color, var(--color-text-link))}.ea-button--link:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, 0)}.ea-button--link:hover:not(.ea-button--disabled){border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:active:not(.ea-button--disabled){border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:hover:not(.ea-button--disabled) .ea-button__label,.ea-button--link:focus-visible .ea-button__label{text-decoration:underline}.ea-button--full-width{width:100%}.ea-button--align-start{justify-content:flex-start}.ea-button--align-end{justify-content:flex-end}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -9785,6 +10077,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
 		uppercase: [{
 			type: i0.Input,
 			args: [{
@@ -9817,12 +10117,237 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		ariaDescribedby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-describedby",
+				required: false
+			}]
+		}],
+		buttonEl: [{
+			type: i0.ViewChild,
+			args: ["buttonEl", { isSignal: true }]
+		}],
 		clicked: [{
 			type: i0.Output,
 			args: ["clicked"]
 		}]
 	}
 });
+var ButtonLinkComponent = class ButtonLinkComponent {
+	authoredTabindex = inject(new HostAttributeToken("tabindex"), { optional: true });
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
+	fullWidth = input(false, ...ngDevMode ? [{ debugName: "fullWidth" }] : 	/* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : 	/* istanbul ignore next */ []);
+	uppercase = input(false, ...ngDevMode ? [{ debugName: "uppercase" }] : 	/* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
+	boxClasses = computed(() => buttonClasses({
+		variant: this.variant(),
+		size: this.size(),
+		align: this.align(),
+		fullWidth: this.fullWidth(),
+		uppercase: this.uppercase(),
+		loading: false,
+		disabled: this.disabled()
+	}), ...ngDevMode ? [{ debugName: "boxClasses" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		const renderer = inject(Renderer2);
+		const destroyRef = inject(DestroyRef);
+		const block = (event) => {
+			if (this.disabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		for (const type of ["click", "auxclick"]) destroyRef.onDestroy(renderer.listen(host, type, block, { capture: true }));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ButtonLinkComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ButtonLinkComponent,
+		isStandalone: true,
+		selector: "a[eaButtonLink]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullWidth: {
+				classPropertyName: "fullWidth",
+				publicName: "fullWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			uppercase: {
+				classPropertyName: "uppercase",
+				publicName: "uppercase",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class.ea-button--full-width": "fullWidth()",
+			"attr.aria-disabled": "disabled() || null",
+			"attr.tabindex": "disabled() ? -1 : authoredTabindex"
+		} },
+		ngImport: i0,
+		template: "<span\n  class=\"ea-button\"\n  [ngClass]=\"boxClasses()\">\n  <span class=\"ea-button__content\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</span>\n",
+		styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--link{min-height:var(--ea-button-min-height, 0);padding:var(--ea-button-padding, 0);border-color:var(--ea-button-border-color, transparent);background-color:var(--ea-button-background-color, transparent);color:var(--ea-button-color, var(--color-text-link))}.ea-button--link:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, 0)}.ea-button--link:hover:not(.ea-button--disabled){border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:active:not(.ea-button--disabled){border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:hover:not(.ea-button--disabled) .ea-button__label,.ea-button--link:focus-visible .ea-button__label{text-decoration:underline}.ea-button--full-width{width:100%}.ea-button--align-start{justify-content:flex-start}.ea-button--align-end{justify-content:flex-end}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{text-decoration:none}:host(:focus-visible){outline:none}:host(:focus-visible) .ea-button{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){:host(:focus-visible) .ea-button{outline:2px solid Highlight;outline-offset:2px}}:host(:focus-visible) .ea-button--link .ea-button__label{text-decoration:underline}:host([aria-disabled=true]){pointer-events:none}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgClass,
+			selector: "[ngClass]",
+			inputs: ["class", "ngClass"]
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ButtonLinkComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[eaButtonLink]",
+			imports: [NgClass, NgComponentOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.ea-button--full-width]": "fullWidth()",
+				"[attr.aria-disabled]": "disabled() || null",
+				"[attr.tabindex]": "disabled() ? -1 : authoredTabindex"
+			},
+			template: "<span\n  class=\"ea-button\"\n  [ngClass]=\"boxClasses()\">\n  <span class=\"ea-button__content\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</span>\n",
+			styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--link{min-height:var(--ea-button-min-height, 0);padding:var(--ea-button-padding, 0);border-color:var(--ea-button-border-color, transparent);background-color:var(--ea-button-background-color, transparent);color:var(--ea-button-color, var(--color-text-link))}.ea-button--link:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, 0)}.ea-button--link:hover:not(.ea-button--disabled){border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:active:not(.ea-button--disabled){border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:hover:not(.ea-button--disabled) .ea-button__label,.ea-button--link:focus-visible .ea-button__label{text-decoration:underline}.ea-button--full-width{width:100%}.ea-button--align-start{justify-content:flex-start}.ea-button--align-end{justify-content:flex-end}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{text-decoration:none}:host(:focus-visible){outline:none}:host(:focus-visible) .ea-button{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){:host(:focus-visible) .ea-button{outline:2px solid Highlight;outline-offset:2px}}:host(:focus-visible) .ea-button--link .ea-button__label{text-decoration:underline}:host([aria-disabled=true]){pointer-events:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		uppercase: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uppercase",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}]
+	}
+});
 var DividerComponent = class DividerComponent {
 	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
@@ -10704,6 +11229,7 @@ var InputComponent = class InputComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
 		...ngDevMode ? { debugName: "ariaLabel" } : 		/* istanbul ignore next */ {},
 		alias: "aria-label"
@@ -10894,6 +11420,13 @@ var InputComponent = class InputComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "aria-label",
@@ -11123,7 +11656,7 @@ var InputComponent = class InputComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-input-field ea-input-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-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-focus));box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"],
 		dependencies: [
 			{
@@ -11143,6 +11676,7 @@ var InputComponent = class InputComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -11211,7 +11745,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => InputComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-input-field ea-input-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-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-focus));box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"]
 		}]
 	}],
@@ -11237,6 +11771,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -11771,6 +12313,7 @@ var CommandPaletteComponent = class CommandPaletteComponent {
 				inputs: [
 					"label",
 					"labelIcon",
+					"labelHelp",
 					"aria-label",
 					"role",
 					"aria-expanded",
@@ -12002,6 +12545,7 @@ var ColorPickerComponent = class ColorPickerComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
@@ -12462,6 +13006,13 @@ var ColorPickerComponent = class ColorPickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -12608,7 +13159,7 @@ var ColorPickerComponent = class ColorPickerComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        @if (!compact()) {\n          <span\n            class=\"ea-color-picker__trigger-value\"\n            [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n            <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n          </span>\n        }\n      </button>\n      @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.--_ea-swatch-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        @if (!compact()) {\n          <span\n            class=\"ea-color-picker__trigger-value\"\n            [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n            <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n          </span>\n        }\n      </button>\n      @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.--_ea-swatch-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"],
 		dependencies: [
 			{
@@ -12623,6 +13174,7 @@ var ColorPickerComponent = class ColorPickerComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -12700,7 +13252,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => ColorPickerComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        @if (!compact()) {\n          <span\n            class=\"ea-color-picker__trigger-value\"\n            [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n            <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n          </span>\n        }\n      </button>\n      @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.--_ea-swatch-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        @if (!compact()) {\n          <span\n            class=\"ea-color-picker__trigger-value\"\n            [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n            <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n          </span>\n        }\n      </button>\n      @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.--_ea-swatch-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"]
 		}]
 	}],
@@ -12737,6 +13289,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -13914,6 +14474,7 @@ var CodeInputComponent = class CodeInputComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	length = input(6, ...ngDevMode ? [{ debugName: "length" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
@@ -14057,6 +14618,13 @@ var CodeInputComponent = class CodeInputComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -14158,7 +14726,7 @@ var CodeInputComponent = class CodeInputComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n        [class.ea-code-input--readonly]=\"readonly()\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholders()[i]\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n        [class.ea-code-input--readonly]=\"readonly()\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholders()[i]\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-focus));box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"],
 		dependencies: [{
 			kind: "component",
@@ -14167,6 +14735,7 @@ var CodeInputComponent = class CodeInputComponent {
 			inputs: [
 				"text",
 				"icon",
+				"help",
 				"forId",
 				"required",
 				"labelId"
@@ -14200,7 +14769,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => CodeInputComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n        [class.ea-code-input--readonly]=\"readonly()\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholders()[i]\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n        [class.ea-code-input--readonly]=\"readonly()\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholders()[i]\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-focus));box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
 		}]
 	}],
@@ -14225,6 +14794,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -14642,6 +15219,7 @@ var DatePickerComponent = class DatePickerComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
@@ -15045,6 +15623,13 @@ var DatePickerComponent = class DatePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -15174,7 +15759,7 @@ var DatePickerComponent = class DatePickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
 		dependencies: [
 			{
@@ -15199,6 +15784,7 @@ var DatePickerComponent = class DatePickerComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -15278,7 +15864,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => DatePickerComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
 		}]
 	}],
@@ -15307,6 +15893,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -16391,6 +16985,7 @@ var DropdownComponent = class DropdownComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
@@ -16597,6 +17192,13 @@ var DropdownComponent = class DropdownComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -16692,7 +17294,7 @@ var DropdownComponent = class DropdownComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:.25em 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
 		dependencies: [
 			{
@@ -16707,6 +17309,7 @@ var DropdownComponent = class DropdownComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -16778,7 +17381,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => DropdownComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (group of renderedGroups(); track $index) {\n          <div\n            class=\"ea-dropdown__group\"\n            [class.ea-dropdown__group--ruled]=\"group.rule\"\n            [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n            [attr.aria-label]=\"group.label ?? null\">\n            @if (group.label; as groupLabel) {\n              <div\n                class=\"ea-dropdown__group-label\"\n                aria-hidden=\"true\">\n                {{ groupLabel }}\n              </div>\n            }\n            @for (entry of group.options; track entry.option.value) {\n              <div\n                class=\"ea-dropdown__option\"\n                [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n                [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n                [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n                [id]=\"id() + '-option-' + entry.index\"\n                role=\"option\"\n                [attr.aria-selected]=\"entry.index === selectedIndex()\"\n                [attr.aria-disabled]=\"entry.option.disabled || null\"\n                (click)=\"select(entry.option)\"\n                (mouseenter)=\"focusedIndex.set(entry.index)\">\n                {{ entry.option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:.25em 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
 		}]
 	}],
@@ -16804,6 +17407,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -17612,6 +18223,7 @@ var FormFieldComponent = class FormFieldComponent {
 	host = inject(ElementRef);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -17685,6 +18297,13 @@ var FormFieldComponent = class FormFieldComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -17736,7 +18355,7 @@ var FormFieldComponent = class FormFieldComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"controlId()\"\n      [required]=\"required()\" />\n  }\n\n  <ng-content />\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"controlId()\"\n      [required]=\"required()\" />\n  }\n\n  <ng-content />\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--2xs{font-size:var(--font-size-2xs)}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"],
 		dependencies: [{
 			kind: "component",
@@ -17745,6 +18364,7 @@ var FormFieldComponent = class FormFieldComponent {
 			inputs: [
 				"text",
 				"icon",
+				"help",
 				"forId",
 				"required",
 				"labelId"
@@ -17775,7 +18395,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			imports: [FieldLabelComponent, FieldMessagesComponent],
-			template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"controlId()\"\n      [required]=\"required()\" />\n  }\n\n  <ng-content />\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"controlId()\"\n      [required]=\"required()\" />\n  }\n\n  <ng-content />\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--2xs{font-size:var(--font-size-2xs)}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"]
 		}]
 	}],
@@ -17797,6 +18417,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -18581,13 +19209,22 @@ i0.ɵɵngDeclareClassMetadata({
 var FileUploaderComponent = class FileUploaderComponent {
 	fileInputEl = viewChild("fileInputEl", ...ngDevMode ? [{ debugName: "fileInputEl" }] : 	/* istanbul ignore next */ []);
 	dropzoneEl = viewChild("dropzoneEl", ...ngDevMode ? [{ debugName: "dropzoneEl" }] : 	/* istanbul ignore next */ []);
+	pickerButton = viewChild(ButtonComponent, ...ngDevMode ? [{ debugName: "pickerButton" }] : 	/* istanbul ignore next */ []);
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	variant = input("dropzone", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	buttonLabel = input(void 0, ...ngDevMode ? [{ debugName: "buttonLabel" }] : 	/* istanbul ignore next */ []);
+	buttonIcon = input(void 0, ...ngDevMode ? [{ debugName: "buttonIcon" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : 		/* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : 	/* istanbul ignore next */ []);
 	multiple = input(true, ...ngDevMode ? [{ debugName: "multiple" }] : 	/* istanbul ignore next */ []);
@@ -18595,6 +19232,7 @@ var FileUploaderComponent = class FileUploaderComponent {
 	maxSize = input(void 0, ...ngDevMode ? [{ debugName: "maxSize" }] : 	/* istanbul ignore next */ []);
 	maxFiles = input(void 0, ...ngDevMode ? [{ debugName: "maxFiles" }] : 	/* istanbul ignore next */ []);
 	showFileList = input(true, ...ngDevMode ? [{ debugName: "showFileList" }] : 	/* istanbul ignore next */ []);
+	showConstraints = input(true, ...ngDevMode ? [{ debugName: "showConstraints" }] : 	/* istanbul ignore next */ []);
 	progress = input(void 0, ...ngDevMode ? [{ debugName: "progress" }] : 	/* istanbul ignore next */ []);
 	id = input(uniqueId("ea-file-uploader"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
 	value = model([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
@@ -18617,6 +19255,7 @@ var FileUploaderComponent = class FileUploaderComponent {
 	showHint = computed(() => !!this.hint() && !this.hasError(), ...ngDevMode ? [{ debugName: "showHint" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => ({
 		[`ea-file-uploader-field--${this.size()}`]: true,
+		"ea-file-uploader-field--button": this.variant() === "button",
 		"ea-file-uploader-field--error": this.hasError(),
 		"ea-file-uploader-field--disabled": this.isDisabled(),
 		"ea-file-uploader-field--drag-over": this.isDragOver(),
@@ -18633,6 +19272,7 @@ var FileUploaderComponent = class FileUploaderComponent {
 		return ids.length ? ids.join(" ") : null;
 	}, ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
 	constraintsText = computed(() => {
+		if (!this.showConstraints()) return "";
 		const messages = this.i18n.messages().fileUploader;
 		const parts = [];
 		const accept = this.accept();
@@ -18644,6 +19284,18 @@ var FileUploaderComponent = class FileUploaderComponent {
 		return parts.join(" • ");
 	}, ...ngDevMode ? [{ debugName: "constraintsText" }] : 	/* istanbul ignore next */ []);
 	promptText = computed(() => this.multiple() ? this.i18n.messages().fileUploader.prompt : this.i18n.messages().fileUploader.promptSingle, ...ngDevMode ? [{ debugName: "promptText" }] : 	/* istanbul ignore next */ []);
+	dropzoneLabel = computed(() => this.label() ?? this.ariaLabel() ?? this.promptText(), ...ngDevMode ? [{ debugName: "dropzoneLabel" }] : 	/* istanbul ignore next */ []);
+	labelId = computed(() => `${this.id()}-label`, ...ngDevMode ? [{ debugName: "labelId" }] : 	/* istanbul ignore next */ []);
+	buttonTextId = computed(() => `${this.id()}-button-text`, ...ngDevMode ? [{ debugName: "buttonTextId" }] : 	/* istanbul ignore next */ []);
+	buttonText = computed(() => {
+		const text = this.buttonLabel();
+		return text === void 0 || !text && !this.buttonIcon() ? this.i18n.messages().fileUploader.browse : text;
+	}, ...ngDevMode ? [{ debugName: "buttonText" }] : 	/* istanbul ignore next */ []);
+	buttonLabelledBy = computed(() => {
+		if (!this.label()) return;
+		return this.buttonText() ? `${this.labelId()} ${this.buttonTextId()}` : this.labelId();
+	}, ...ngDevMode ? [{ debugName: "buttonLabelledBy" }] : 	/* istanbul ignore next */ []);
+	buttonAriaLabel = computed(() => !this.label() && !this.buttonText() ? this.ariaLabel() ?? this.i18n.messages().fileUploader.browse : void 0, ...ngDevMode ? [{ debugName: "buttonAriaLabel" }] : 	/* istanbul ignore next */ []);
 	writeValue(value) {
 		this.value.set(value ?? []);
 	}
@@ -18673,6 +19325,9 @@ var FileUploaderComponent = class FileUploaderComponent {
 		this.isFocused.set(false);
 		this.onTouched();
 	}
+	onPickerButtonFocusOut() {
+		this.onTouched();
+	}
 	onFileSelected(event) {
 		const inputEl = event.target;
 		const files = inputEl.files ? Array.from(inputEl.files) : [];
@@ -18716,6 +19371,7 @@ var FileUploaderComponent = class FileUploaderComponent {
 		this.onChange(next);
 		this.fileRemoved.emit(file);
 		this.dropzoneEl()?.nativeElement.focus();
+		this.pickerButton()?.focus();
 	}
 	acceptFiles(incoming) {
 		const accepted = [];
@@ -18807,6 +19463,13 @@ var FileUploaderComponent = class FileUploaderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -18835,6 +19498,34 @@ var FileUploaderComponent = class FileUploaderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			buttonLabel: {
+				classPropertyName: "buttonLabel",
+				publicName: "buttonLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			buttonIcon: {
+				classPropertyName: "buttonIcon",
+				publicName: "buttonIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -18884,6 +19575,13 @@ var FileUploaderComponent = class FileUploaderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			showConstraints: {
+				classPropertyName: "showConstraints",
+				publicName: "showConstraints",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			progress: {
 				classPropertyName: "progress",
 				publicName: "progress",
@@ -18917,28 +19615,59 @@ var FileUploaderComponent = class FileUploaderComponent {
 			useExisting: forwardRef(() => FileUploaderComponent),
 			multi: true
 		}],
-		viewQueries: [{
-			propertyName: "fileInputEl",
-			first: true,
-			predicate: ["fileInputEl"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "dropzoneEl",
-			first: true,
-			predicate: ["dropzoneEl"],
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "fileInputEl",
+				first: true,
+				predicate: ["fileInputEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "dropzoneEl",
+				first: true,
+				predicate: ["dropzoneEl"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "pickerButton",
+				first: true,
+				predicate: ButtonComponent,
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-		styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--color-state-hover));color:var(--ea-file-uploader-dropzone-color-hover, var(--color-text-secondary))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"],
+		template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (variant() === 'button') {\n    <ea-button\n      class=\"ea-file-uploader-field__button\"\n      variant=\"secondary\"\n      [size]=\"size()\"\n      [icon]=\"buttonIcon()\"\n      [disabled]=\"isDisabled()\"\n      [aria-label]=\"buttonAriaLabel()\"\n      [aria-labelledby]=\"buttonLabelledBy()\"\n      [aria-describedby]=\"describedBy() ?? undefined\"\n      (clicked)=\"openFilePicker()\"\n      (focusout)=\"onPickerButtonFocusOut()\">\n      @if (buttonText(); as text) {\n        <span [id]=\"buttonTextId()\">{{ text }}</span>\n      }\n    </ea-button>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  } @else {\n    <button\n      #dropzoneEl\n      type=\"button\"\n      class=\"ea-file-uploader-field__dropzone\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"dropzoneLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\"\n      (keydown)=\"onDropzoneKeydown($event)\"\n      (focus)=\"onDropzoneFocus()\"\n      (blur)=\"onDropzoneBlur()\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <span\n        class=\"ea-file-uploader-field__upload-icon\"\n        aria-hidden=\"true\">\n        <ng-content select=\"[icon]\">\n          <ea-icon-upload-cloud />\n        </ng-content>\n      </span>\n      <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n      @if (constraintsText(); as c) {\n        <span\n          class=\"ea-file-uploader-field__constraints\"\n          [id]=\"constraintsId()\">\n          {{ c }}\n        </span>\n      }\n    </button>\n  }\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle)));color:var(--ea-file-uploader-dropzone-color-hover, color-mix(in srgb, var(--color-text-tertiary), var(--color-text-secondary)))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__button{align-self:flex-start}.ea-file-uploader-field--error .ea-file-uploader-field__button{--ea-button-border-color: var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"],
 		dependencies: [
 			{
 				kind: "component",
 				type: ArchiveIconComponent,
 				selector: "ea-icon-archive"
 			},
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "ea-button",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading",
+					"fullWidth",
+					"align",
+					"uppercase",
+					"icon",
+					"aria-label",
+					"aria-current",
+					"aria-labelledby",
+					"aria-describedby"
+				],
+				outputs: ["clicked"]
+			},
 			{
 				kind: "component",
 				type: FieldLabelComponent,
@@ -18946,6 +19675,7 @@ var FileUploaderComponent = class FileUploaderComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -19018,6 +19748,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			imports: [
 				ArchiveIconComponent,
+				ButtonComponent,
 				FieldLabelComponent,
 				FieldMessagesComponent,
 				FileIconComponent,
@@ -19034,8 +19765,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => FileUploaderComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-			styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--color-state-hover));color:var(--ea-file-uploader-dropzone-color-hover, var(--color-text-secondary))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"]
+			template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (variant() === 'button') {\n    <ea-button\n      class=\"ea-file-uploader-field__button\"\n      variant=\"secondary\"\n      [size]=\"size()\"\n      [icon]=\"buttonIcon()\"\n      [disabled]=\"isDisabled()\"\n      [aria-label]=\"buttonAriaLabel()\"\n      [aria-labelledby]=\"buttonLabelledBy()\"\n      [aria-describedby]=\"describedBy() ?? undefined\"\n      (clicked)=\"openFilePicker()\"\n      (focusout)=\"onPickerButtonFocusOut()\">\n      @if (buttonText(); as text) {\n        <span [id]=\"buttonTextId()\">{{ text }}</span>\n      }\n    </ea-button>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  } @else {\n    <button\n      #dropzoneEl\n      type=\"button\"\n      class=\"ea-file-uploader-field__dropzone\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"dropzoneLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openFilePicker()\"\n      (keydown)=\"onDropzoneKeydown($event)\"\n      (focus)=\"onDropzoneFocus()\"\n      (blur)=\"onDropzoneBlur()\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <span\n        class=\"ea-file-uploader-field__upload-icon\"\n        aria-hidden=\"true\">\n        <ng-content select=\"[icon]\">\n          <ea-icon-upload-cloud />\n        </ng-content>\n      </span>\n      <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n      @if (constraintsText(); as c) {\n        <span\n          class=\"ea-file-uploader-field__constraints\"\n          [id]=\"constraintsId()\">\n          {{ c }}\n        </span>\n      }\n    </button>\n  }\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:var(--ea-file-uploader-dropzone-padding, 1.5em);font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle)));color:var(--ea-file-uploader-dropzone-color-hover, color-mix(in srgb, var(--color-text-tertiary), var(--color-text-secondary)))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:default;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__button{align-self:flex-start}.ea-file-uploader-field--error .ea-file-uploader-field__button{--ea-button-border-color: var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:.25em;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:default;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -19047,6 +19778,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["dropzoneEl", { isSignal: true }]
 		}],
+		pickerButton: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => ButtonComponent), { isSignal: true }]
+		}],
 		label: [{
 			type: i0.Input,
 			args: [{
@@ -19063,6 +19798,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -19095,6 +19838,38 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		buttonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonLabel",
+				required: false
+			}]
+		}],
+		buttonIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonIcon",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -19151,6 +19926,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showConstraints: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showConstraints",
+				required: false
+			}]
+		}],
 		progress: [{
 			type: i0.Input,
 			args: [{
@@ -19334,6 +20117,7 @@ var LineChartComponent = class LineChartComponent {
 	visibleRangeChange = output();
 	viewport = injectChartViewport(this.size);
 	format = injectChartFormatter(this.formatValue);
+	plotEl = viewChild("plot", ...ngDevMode ? [{ debugName: "plotEl" }] : 	/* istanbul ignore next */ []);
 	active = signal(null, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
 	clipId = `ea-line-chart-clip-${nextId++}`;
 	breakMaskId = `${this.clipId}-break`;
@@ -19348,6 +20132,7 @@ var LineChartComponent = class LineChartComponent {
 	panning = signal(false, ...ngDevMode ? [{ debugName: "panning" }] : 	/* istanbul ignore next */ []);
 	drag = null;
 	suppressClick = false;
+	releaseTap = null;
 	label = computed(() => this.ariaLabel() || this.i18n.messages().chart.lineChart, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	count = computed(() => Math.max(this.labels().length, ...this.series().map((s) => s.data.length), 0), ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
 	hasData = computed(() => this.series().some((s) => s.data.some((v) => this.isValue(v))), ...ngDevMode ? [{ debugName: "hasData" }] : 	/* istanbul ignore next */ []);
@@ -19566,6 +20351,9 @@ var LineChartComponent = class LineChartComponent {
 		return event ? this.i18n.messages().chart.point(event.seriesName, event.label, this.format()(event.value)) : "";
 	}, ...ngDevMode ? [{ debugName: "announcement" }] : 	/* istanbul ignore next */ []);
 	showsLegend = computed(() => this.showLegend() && this.series().length > 1, ...ngDevMode ? [{ debugName: "showsLegend" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.endTapHold());
+	}
 	seriesColor(index) {
 		return chartColor(index, this.series()[index]?.color);
 	}
@@ -19582,6 +20370,7 @@ var LineChartComponent = class LineChartComponent {
 	}
 	onPointerDown(event) {
 		this.suppressClick = false;
+		this.endTapHold();
 		const domain = this.domain();
 		if (domain.span != null && event.button === 0) this.drag = {
 			pointerId: event.pointerId,
@@ -19592,6 +20381,7 @@ var LineChartComponent = class LineChartComponent {
 		this.onPointerMove(event);
 	}
 	onPointerMove(event) {
+		if (event.buttons === 0) this.endTapHold();
 		if (this.drag && event.buttons === 0) this.endDrag();
 		const drag = this.drag;
 		if (drag && drag.pointerId === event.pointerId) {
@@ -19628,13 +20418,20 @@ var LineChartComponent = class LineChartComponent {
 		});
 	}
 	onPointerUp(event) {
+		let panned = false;
 		if (this.drag?.pointerId === event.pointerId) {
-			this.suppressClick = this.drag.moved;
+			panned = this.drag.moved;
+			this.suppressClick = panned;
 			this.endDrag();
 		}
+		if (!panned && (event.pointerType === "touch" || event.pointerType === "pen")) this.holdTap();
+	}
+	onPointerCancel(event) {
+		if (this.drag?.pointerId === event.pointerId) this.endDrag();
+		this.setActive(null);
 	}
 	onPointerLeave() {
-		if (!this.drag?.moved) this.setActive(null);
+		if (!this.drag?.moved && !this.releaseTap) this.setActive(null);
 	}
 	onWheel(event) {
 		if (event.ctrlKey && event.deltaY && this.visibleXSpan() != null) {
@@ -19885,6 +20682,20 @@ var LineChartComponent = class LineChartComponent {
 		this.drag = null;
 		this.panning.set(false);
 	}
+	holdTap() {
+		const plot = this.plotEl()?.nativeElement;
+		if (this.releaseTap || !plot || !this.active()) return;
+		const doc = plot.ownerDocument;
+		const onPress = (event) => {
+			if (!(event.target instanceof Node) || !plot.contains(event.target)) this.setActive(null);
+		};
+		doc.addEventListener("pointerdown", onPress, true);
+		this.releaseTap = () => doc.removeEventListener("pointerdown", onPress, true);
+	}
+	endTapHold() {
+		this.releaseTap?.();
+		this.releaseTap = null;
+	}
 	reveal(index) {
 		const domain = this.domain();
 		const position = this.positions()[index];
@@ -19952,6 +20763,7 @@ var LineChartComponent = class LineChartComponent {
 		};
 	}
 	setActive(next) {
+		if (!next) this.endTapHold();
 		const current = this.active();
 		if (current?.series === next?.series && current?.index === next?.index) return;
 		this.active.set(next);
@@ -20118,8 +20930,15 @@ var LineChartComponent = class LineChartComponent {
 			activePointChange: "activePointChange",
 			visibleRangeChange: "visibleRangeChange"
 		},
+		viewQueries: [{
+			propertyName: "plotEl",
+			first: true,
+			predicate: ["plot"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerUp($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+		template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      #plot\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerCancel($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
 		styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"],
 		dependencies: [{
 			kind: "directive",
@@ -20156,10 +20975,11 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [NgClass, TooltipDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerUp($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
+			template: "<div\n  class=\"ea-line-chart\"\n  [ngClass]=\"hostClasses()\"\n  [style.--ea-chart-duration]=\"animationDuration() + 'ms'\">\n  @if (hasData()) {\n    <div\n      #plot\n      class=\"ea-line-chart__plot\"\n      role=\"group\"\n      tabindex=\"0\"\n      [attr.aria-roledescription]=\"i18n.messages().chart.roleDescription\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\">\n      @for (pass of renderPass(); track pass) {\n        <svg\n          class=\"ea-line-chart__svg\"\n          aria-hidden=\"true\"\n          [attr.width]=\"layout().width\"\n          [attr.height]=\"layout().height\"\n          [attr.viewBox]=\"'0 0 ' + layout().width + ' ' + layout().height\"\n          [style.--ea-line-chart-baseline]=\"layout().baselineY + 'px'\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          (pointercancel)=\"onPointerCancel($event)\"\n          (pointerleave)=\"onPointerLeave()\"\n          (wheel)=\"onWheel($event)\"\n          (gesturestart)=\"onGestureStart($event)\"\n          (gesturechange)=\"onGestureChange($event)\"\n          (gestureend)=\"onGestureEnd()\"\n          (click)=\"onClick()\">\n          @if (layout().windowed) {\n            <defs>\n              <clipPath [attr.id]=\"clipId\">\n                <rect\n                  [attr.x]=\"layout().left\"\n                  y=\"0\"\n                  [attr.width]=\"layout().plotWidth\"\n                  [attr.height]=\"layout().height\" />\n              </clipPath>\n            </defs>\n          }\n          <rect\n            class=\"ea-line-chart__hit\"\n            [attr.x]=\"layout().left\"\n            [attr.y]=\"layout().top\"\n            [attr.width]=\"layout().plotWidth\"\n            [attr.height]=\"layout().plotHeight\" />\n          @for (tick of layout().ticks; track tick.value) {\n            @if (showGrid()) {\n              <line\n                class=\"ea-line-chart__grid\"\n                [attr.x1]=\"layout().left\"\n                [attr.x2]=\"layout().left + layout().plotWidth\"\n                [attr.y1]=\"tick.y\"\n                [attr.y2]=\"tick.y\" />\n            }\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--y\"\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"layout().tickX\"\n              [attr.y]=\"tick.y\">\n              {{ tick.text }}\n            </text>\n          }\n          <line\n            class=\"ea-line-chart__baseline\"\n            [attr.x1]=\"layout().left\"\n            [attr.x2]=\"layout().left + layout().plotWidth\"\n            [attr.y1]=\"layout().top + layout().plotHeight\"\n            [attr.y2]=\"layout().top + layout().plotHeight\" />\n          @if (layout().axisBreak; as axisBreak) {\n            <path\n              class=\"ea-line-chart__y-axis\"\n              [attr.d]=\"axisBreak.axis\" />\n            <path\n              class=\"ea-line-chart__axis-break\"\n              [attr.d]=\"axisBreak.slashes\" />\n          }\n          @for (xLabel of layout().xLabels; track xLabel.key) {\n            <line\n              class=\"ea-line-chart__x-tick\"\n              [attr.x1]=\"xLabel.x\"\n              [attr.x2]=\"xLabel.x\"\n              [attr.y1]=\"layout().axisY\"\n              [attr.y2]=\"layout().tickEndY\" />\n            <text\n              class=\"ea-line-chart__axis ea-line-chart__axis--x\"\n              [attr.text-anchor]=\"layout().labelAngle ? 'end' : 'middle'\"\n              [attr.dominant-baseline]=\"layout().labelAngle ? 'central' : null\"\n              [attr.transform]=\"\n                layout().labelAngle\n                  ? 'rotate(' +\n                    -layout().labelAngle +\n                    ' ' +\n                    xLabel.x +\n                    ' ' +\n                    layout().labelY +\n                    ')'\n                  : null\n              \"\n              [attr.x]=\"xLabel.textX\"\n              [attr.y]=\"layout().labelY\">\n              {{ xLabel.text }}\n            </text>\n          }\n          @if (layout().axisBreak; as axisBreak) {\n            <!-- Keeps the break's gap open under a crosshair drawn along the y-axis -->\n            <mask\n              maskUnits=\"userSpaceOnUse\"\n              [attr.id]=\"breakMaskId\">\n              <rect\n                fill=\"white\"\n                x=\"0\"\n                y=\"0\"\n                [attr.width]=\"layout().width\"\n                [attr.height]=\"layout().height\" />\n              <rect\n                fill=\"black\"\n                [attr.x]=\"axisBreak.gap.x\"\n                [attr.y]=\"axisBreak.gap.y\"\n                [attr.width]=\"axisBreak.gap.width\"\n                [attr.height]=\"axisBreak.gap.height\" />\n            </mask>\n          }\n          @if (tooltip(); as tip) {\n            <line\n              class=\"ea-line-chart__crosshair\"\n              [attr.mask]=\"layout().axisBreak ? 'url(#' + breakMaskId + ')' : null\"\n              [attr.x1]=\"tip.x\"\n              [attr.x2]=\"tip.x\"\n              [attr.y1]=\"layout().top\"\n              [attr.y2]=\"layout().top + layout().plotHeight\" />\n          }\n          <g [attr.clip-path]=\"layout().windowed ? 'url(#' + clipId + ')' : null\">\n            <g class=\"ea-line-chart__lines\">\n              @for (line of layout().series; track $index; let s = $index) {\n                <g\n                  class=\"ea-line-chart__series\"\n                  [class.ea-line-chart__series--dimmed]=\"isDimmed(s)\"\n                  [style.--ea-chart-color]=\"line.color\">\n                  @if (showArea()) {\n                    @for (area of line.areas; track $index) {\n                      <path\n                        class=\"ea-line-chart__area\"\n                        [attr.d]=\"area\" />\n                    }\n                  }\n                  @for (path of line.paths; track $index) {\n                    <path\n                      class=\"ea-line-chart__line\"\n                      pathLength=\"1\"\n                      [attr.d]=\"path\" />\n                  }\n                  @for (point of line.points; track point.index) {\n                    @if (showPoints() || isActivePoint(s, point.index)) {\n                      <circle\n                        class=\"ea-line-chart__point\"\n                        [class.ea-line-chart__point--active]=\"\n                          isActivePoint(s, point.index)\n                        \"\n                        [attr.cx]=\"point.x\"\n                        [attr.cy]=\"point.y\"\n                        [attr.r]=\"isActivePoint(s, point.index) ? 6 : 4\" />\n                    }\n                  }\n                </g>\n              }\n            </g>\n          </g>\n          @for (tip of tooltips(); track tip.key) {\n            <rect\n              class=\"ea-line-chart__anchor\"\n              width=\"12\"\n              height=\"12\"\n              [attr.x]=\"tip.x - 6\"\n              [attr.y]=\"tip.y - 6\"\n              [eaTooltip]=\"tooltipContent\"\n              [tooltipOpen]=\"true\"\n              [maxWidth]=\"undefined\" />\n          }\n        </svg>\n      }\n      <ng-template #tooltipContent>\n        @if (tooltip(); as tip) {\n          <div class=\"ea-line-chart__tooltip\">\n            <span class=\"ea-line-chart__tooltip-title\">{{ tip.title }}</span>\n            @for (row of tip.rows; track $index) {\n              <span\n                class=\"ea-line-chart__tooltip-row\"\n                [class.ea-line-chart__tooltip-row--active]=\"row.active\">\n                <span\n                  class=\"ea-line-chart__swatch\"\n                  [style.--ea-chart-color]=\"row.color\">\n                </span>\n                <span class=\"ea-line-chart__tooltip-name\">{{ row.name }}</span>\n                <span class=\"ea-line-chart__tooltip-value\">{{ row.value }}</span>\n              </span>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- Hidden through a block, since a table ignores the 1px size and keeps its full height -->\n      <div class=\"ea-line-chart__table\">\n        <table>\n          <caption>\n            {{ label() }}\n          </caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{{ i18n.messages().chart.category }}</th>\n\n              @for (s of series(); track $index) {\n                <th scope=\"col\">{{ s.name }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of labels(); track $index; let i = $index) {\n              <tr>\n                <th scope=\"row\">{{ row }}</th>\n\n                @for (s of series(); track $index) {\n                  <td>{{ tableValue(s.data[i]) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      class=\"ea-line-chart__live\"\n      aria-live=\"polite\">\n      {{ announcement() }}\n    </div>\n  } @else {\n    <div\n      class=\"ea-line-chart__empty\"\n      role=\"img\"\n      [attr.aria-label]=\"label()\"\n      [style.height.px]=\"height()\">\n      {{ i18n.messages().chart.noData }}\n    </div>\n  }\n  @if (showsLegend()) {\n    <ul\n      class=\"ea-line-chart__legend\"\n      aria-hidden=\"true\">\n      @for (s of series(); track $index; let i = $index) {\n        <li class=\"ea-line-chart__legend-item\">\n          <span\n            class=\"ea-line-chart__legend-line\"\n            [style.--ea-chart-color]=\"seriesColor(i)\">\n          </span>\n          {{ s.name }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n",
 			styles: ["@keyframes ea-chart-fade{0%{opacity:0}}@keyframes ea-chart-draw{0%{stroke-dashoffset:1}}@keyframes ea-chart-grow-y{0%{transform:scaleY(0)}}@keyframes ea-chart-grow-x{0%{transform:scaleX(0)}}@keyframes ea-chart-grow{0%{transform:scale(0)}}ea-line-chart{display:block}.ea-line-chart{position:relative;display:flex;flex-direction:column;gap:.75em;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-line-chart--2xs{font-size:var(--font-size-2xs)}.ea-line-chart--xs{font-size:var(--font-size-xs)}.ea-line-chart--sm{font-size:var(--font-size-sm)}.ea-line-chart--md{font-size:var(--font-size-md)}.ea-line-chart--lg{font-size:var(--font-size-lg)}.ea-line-chart--xl{font-size:var(--font-size-xl)}.ea-line-chart__plot{position:relative;border-radius:var(--radius-md);outline:none}.ea-line-chart__plot:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-line-chart__plot:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-line-chart__plot svg{display:block;overflow:visible}.ea-line-chart__svg{direction:ltr;touch-action:pan-y}.ea-line-chart__hit{fill:transparent}.ea-line-chart__grid{stroke:var(--color-divider);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__baseline{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__axis{font-size:.75em;fill:var(--color-text-secondary)}.ea-line-chart__x-tick{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges}.ea-line-chart__y-axis{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;fill:none}.ea-line-chart__axis-break{fill:none;stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round}.ea-line-chart__crosshair{stroke:var(--color-border-strong);stroke-width:1px;shape-rendering:crispEdges;pointer-events:none}.ea-line-chart__series{pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.ea-line-chart__series--dimmed{opacity:.35}.ea-line-chart__area{fill:var(--ea-chart-color);fill-opacity:.12}.ea-line-chart__line{fill:none;stroke:var(--ea-chart-color);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ea-line-chart__point{fill:var(--ea-chart-color);stroke:var(--ea-chart-surface, var(--color-bg-base));stroke-width:2px}.ea-line-chart__tooltip{display:flex;flex-direction:column;gap:var(--space-1)}.ea-line-chart__anchor{fill:transparent}.ea-line-chart__tooltip-title{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-row{display:flex;align-items:center;gap:.5em}.ea-line-chart__tooltip-row--active{font-weight:var(--font-weight-medium)}.ea-line-chart__tooltip-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.ea-line-chart__swatch{flex-shrink:0;width:.75em;height:.75em;border-radius:var(--radius-sm);background-color:var(--ea-chart-color)}.ea-line-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.375em 1em;padding:0;margin:0;font-size:.875em;list-style:none;color:var(--color-text-secondary)}.ea-line-chart__legend-item{display:flex;align-items:center;gap:.375em}.ea-line-chart__legend-line{width:1em;height:2px;border-radius:var(--radius-full);background-color:var(--ea-chart-color)}.ea-line-chart__table,.ea-line-chart__live{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-line-chart__empty{display:flex;align-items:center;justify-content:center;font-size:.875em;color:var(--color-text-tertiary)}.ea-line-chart--pannable .ea-line-chart__svg{cursor:grab}.ea-line-chart--panning .ea-line-chart__svg{cursor:grabbing;-webkit-user-select:none;user-select:none}.ea-line-chart--animate-draw .ea-line-chart__line{stroke-dasharray:1;animation-name:ea-chart-draw;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__line{animation:none}}.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation-name:ea-chart-fade;animation-delay:var(--ea-chart-duration, .6s);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-draw .ea-line-chart__area,.ea-line-chart--animate-draw .ea-line-chart__point{animation:none}}.ea-line-chart--animate-reveal .ea-line-chart__lines{clip-path:inset(-8px);animation-name:ea-line-chart-reveal;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-reveal .ea-line-chart__lines{animation:none}}.ea-line-chart--animate-fade .ea-line-chart__series{animation-name:ea-chart-fade;animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-fade .ea-line-chart__series{animation:none}}.ea-line-chart--animate-rise .ea-line-chart__series{animation-name:ea-chart-grow-y;transform-origin:0 var(--ea-line-chart-baseline);animation-duration:var(--ea-chart-duration, .6s);animation-timing-function:var(--ease-out);animation-fill-mode:both}@media(prefers-reduced-motion:reduce){.ea-line-chart--animate-rise .ea-line-chart__series{animation:none}}@keyframes ea-line-chart-reveal{0%{clip-path:inset(-8px 100% -8px -8px)}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		labels: [{
 			type: i0.Input,
@@ -20332,6 +21152,10 @@ i0.ɵɵngDeclareClassMetadata({
 		visibleRangeChange: [{
 			type: i0.Output,
 			args: ["visibleRangeChange"]
+		}],
+		plotEl: [{
+			type: i0.ViewChild,
+			args: ["plot", { isSignal: true }]
 		}]
 	}
 });
@@ -20834,6 +21658,7 @@ var TagComponent = class TagComponent {
 	removeLabel = input(void 0, ...ngDevMode ? [{ debugName: "removeLabel" }] : 	/* istanbul ignore next */ []);
 	maxWidth = input(void 0, ...ngDevMode ? [{ debugName: "maxWidth" }] : 	/* istanbul ignore next */ []);
 	color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : 	/* istanbul ignore next */ []);
+	ink = input(void 0, ...ngDevMode ? [{ debugName: "ink" }] : 	/* istanbul ignore next */ []);
 	tooltip = input("above", ...ngDevMode ? [{ debugName: "tooltip" }] : 	/* istanbul ignore next */ []);
 	removeTabbable = input(true, ...ngDevMode ? [{ debugName: "removeTabbable" }] : 	/* istanbul ignore next */ []);
 	uppercase = input(false, ...ngDevMode ? [{ debugName: "uppercase" }] : 	/* istanbul ignore next */ []);
@@ -20854,12 +21679,14 @@ var TagComponent = class TagComponent {
 		return typeof max === "number" ? `${max}px` : max;
 	}, ...ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : 	/* istanbul ignore next */ []);
 	resolvedInk = computed(() => {
+		const custom = this.ink();
+		if (custom) return custom;
 		const color = this.color();
 		if (!color) return null;
 		const ink = readableInk(color);
 		return ink === null ? null : `var(--color-neutral-${ink === "light" ? "0" : "950"})`;
 	}, ...ngDevMode ? [{ debugName: "resolvedInk" }] : 	/* istanbul ignore next */ []);
-	resolvedColor = computed(() => this.resolvedInk() === null ? null : this.color() ?? null, ...ngDevMode ? [{ debugName: "resolvedColor" }] : 	/* istanbul ignore next */ []);
+	resolvedColor = computed(() => this.resolvedInk() === null ? null : this.color() || null, ...ngDevMode ? [{ debugName: "resolvedColor" }] : 	/* istanbul ignore next */ []);
 	constructor() {
 		afterNextRender(() => this.watchLabel());
 	}
@@ -20951,6 +21778,13 @@ var TagComponent = class TagComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			ink: {
+				classPropertyName: "ink",
+				publicName: "ink",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			tooltip: {
 				classPropertyName: "tooltip",
 				publicName: "tooltip",
@@ -21097,6 +21931,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ink: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ink",
+				required: false
+			}]
+		}],
 		tooltip: [{
 			type: i0.Input,
 			args: [{
@@ -21139,6 +21981,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 	destroyRef = inject(DestroyRef);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
 		...ngDevMode ? { debugName: "ariaLabel" } : 		/* istanbul ignore next */ {},
 		alias: "aria-label"
@@ -21480,6 +22323,13 @@ var MultiSelectComponent = class MultiSelectComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "aria-label",
@@ -21675,7 +22525,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\"\n        [style.max-height.px]=\"popoverMaxHeight()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (group of renderedGroups(); track $index) {\n            <li\n              class=\"ea-multi-select__group\"\n              [class.ea-multi-select__group--ruled]=\"group.rule\"\n              role=\"presentation\">\n              @if (group.label; as groupLabel) {\n                <span\n                  class=\"ea-multi-select__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </span>\n              }\n              <ul\n                class=\"ea-multi-select__group-options\"\n                [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n                [attr.aria-label]=\"group.label ?? null\">\n                @for (entry of group.options; track entry.option.value) {\n                  <li\n                    class=\"ea-multi-select__option\"\n                    [class.ea-multi-select__option--focused]=\"\n                      focusedIndex() === entry.index + selectAllOffset()\n                    \"\n                    [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n                    [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n                    [attr.aria-disabled]=\"entry.option.disabled || null\"\n                    (click)=\"onOptionClick(entry.option, entry.index)\">\n                    <ea-checkbox\n                      size=\"sm\"\n                      inert\n                      aria-hidden=\"true\"\n                      [checked]=\"selectedSet().has(entry.option.value)\"\n                      [disabled]=\"!!entry.option.disabled\" />\n                    <span\n                      #optionLabelEl\n                      class=\"ea-multi-select__option-label\"\n                      [attr.data-value]=\"entry.option.value\"\n                      [eaTooltip]=\"\n                        clippedOptions().has(entry.option.value) ? entry.option.label : ''\n                      \">\n                      {{ entry.option.label }}\n                    </span>\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n          @if (creatableText(); as newText) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--create\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n              [id]=\"id() + '-opt-' + createRow()\"\n              role=\"option\"\n              [attr.aria-selected]=\"false\"\n              (click)=\"createOption()\">\n              <ea-icon-plus\n                class=\"ea-multi-select__create-icon\"\n                aria-hidden=\"true\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.create(newText) }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0 && !creatableText()) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\"\n        [style.max-height.px]=\"popoverMaxHeight()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (group of renderedGroups(); track $index) {\n            <li\n              class=\"ea-multi-select__group\"\n              [class.ea-multi-select__group--ruled]=\"group.rule\"\n              role=\"presentation\">\n              @if (group.label; as groupLabel) {\n                <span\n                  class=\"ea-multi-select__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </span>\n              }\n              <ul\n                class=\"ea-multi-select__group-options\"\n                [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n                [attr.aria-label]=\"group.label ?? null\">\n                @for (entry of group.options; track entry.option.value) {\n                  <li\n                    class=\"ea-multi-select__option\"\n                    [class.ea-multi-select__option--focused]=\"\n                      focusedIndex() === entry.index + selectAllOffset()\n                    \"\n                    [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n                    [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n                    [attr.aria-disabled]=\"entry.option.disabled || null\"\n                    (click)=\"onOptionClick(entry.option, entry.index)\">\n                    <ea-checkbox\n                      size=\"sm\"\n                      inert\n                      aria-hidden=\"true\"\n                      [checked]=\"selectedSet().has(entry.option.value)\"\n                      [disabled]=\"!!entry.option.disabled\" />\n                    <span\n                      #optionLabelEl\n                      class=\"ea-multi-select__option-label\"\n                      [attr.data-value]=\"entry.option.value\"\n                      [eaTooltip]=\"\n                        clippedOptions().has(entry.option.value) ? entry.option.label : ''\n                      \">\n                      {{ entry.option.label }}\n                    </span>\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n          @if (creatableText(); as newText) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--create\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n              [id]=\"id() + '-opt-' + createRow()\"\n              role=\"option\"\n              [attr.aria-selected]=\"false\"\n              (click)=\"createOption()\">\n              <ea-icon-plus\n                class=\"ea-multi-select__create-icon\"\n                aria-hidden=\"true\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.create(newText) }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0 && !creatableText()) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"],
 		dependencies: [
 			{
@@ -21711,6 +22561,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -21778,6 +22629,7 @@ var MultiSelectComponent = class MultiSelectComponent {
 					"removeLabel",
 					"maxWidth",
 					"color",
+					"ink",
 					"tooltip",
 					"removeTabbable",
 					"uppercase"
@@ -21835,7 +22687,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => MultiSelectComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\"\n        [style.max-height.px]=\"popoverMaxHeight()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (group of renderedGroups(); track $index) {\n            <li\n              class=\"ea-multi-select__group\"\n              [class.ea-multi-select__group--ruled]=\"group.rule\"\n              role=\"presentation\">\n              @if (group.label; as groupLabel) {\n                <span\n                  class=\"ea-multi-select__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </span>\n              }\n              <ul\n                class=\"ea-multi-select__group-options\"\n                [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n                [attr.aria-label]=\"group.label ?? null\">\n                @for (entry of group.options; track entry.option.value) {\n                  <li\n                    class=\"ea-multi-select__option\"\n                    [class.ea-multi-select__option--focused]=\"\n                      focusedIndex() === entry.index + selectAllOffset()\n                    \"\n                    [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n                    [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n                    [attr.aria-disabled]=\"entry.option.disabled || null\"\n                    (click)=\"onOptionClick(entry.option, entry.index)\">\n                    <ea-checkbox\n                      size=\"sm\"\n                      inert\n                      aria-hidden=\"true\"\n                      [checked]=\"selectedSet().has(entry.option.value)\"\n                      [disabled]=\"!!entry.option.disabled\" />\n                    <span\n                      #optionLabelEl\n                      class=\"ea-multi-select__option-label\"\n                      [attr.data-value]=\"entry.option.value\"\n                      [eaTooltip]=\"\n                        clippedOptions().has(entry.option.value) ? entry.option.label : ''\n                      \">\n                      {{ entry.option.label }}\n                    </span>\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n          @if (creatableText(); as newText) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--create\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n              [id]=\"id() + '-opt-' + createRow()\"\n              role=\"option\"\n              [attr.aria-selected]=\"false\"\n              (click)=\"createOption()\">\n              <ea-icon-plus\n                class=\"ea-multi-select__create-icon\"\n                aria-hidden=\"true\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.create(newText) }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0 && !creatableText()) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\"\n        [style.max-height.px]=\"popoverMaxHeight()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (group of renderedGroups(); track $index) {\n            <li\n              class=\"ea-multi-select__group\"\n              [class.ea-multi-select__group--ruled]=\"group.rule\"\n              role=\"presentation\">\n              @if (group.label; as groupLabel) {\n                <span\n                  class=\"ea-multi-select__group-label\"\n                  aria-hidden=\"true\">\n                  {{ groupLabel }}\n                </span>\n              }\n              <ul\n                class=\"ea-multi-select__group-options\"\n                [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n                [attr.aria-label]=\"group.label ?? null\">\n                @for (entry of group.options; track entry.option.value) {\n                  <li\n                    class=\"ea-multi-select__option\"\n                    [class.ea-multi-select__option--focused]=\"\n                      focusedIndex() === entry.index + selectAllOffset()\n                    \"\n                    [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n                    [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n                    [attr.aria-disabled]=\"entry.option.disabled || null\"\n                    (click)=\"onOptionClick(entry.option, entry.index)\">\n                    <ea-checkbox\n                      size=\"sm\"\n                      inert\n                      aria-hidden=\"true\"\n                      [checked]=\"selectedSet().has(entry.option.value)\"\n                      [disabled]=\"!!entry.option.disabled\" />\n                    <span\n                      #optionLabelEl\n                      class=\"ea-multi-select__option-label\"\n                      [attr.data-value]=\"entry.option.value\"\n                      [eaTooltip]=\"\n                        clippedOptions().has(entry.option.value) ? entry.option.label : ''\n                      \">\n                      {{ entry.option.label }}\n                    </span>\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n          @if (creatableText(); as newText) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--create\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n              [id]=\"id() + '-opt-' + createRow()\"\n              role=\"option\"\n              [attr.aria-selected]=\"false\"\n              (click)=\"createOption()\">\n              <ea-icon-plus\n                class=\"ea-multi-select__create-icon\"\n                aria-hidden=\"true\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.create(newText) }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0 && !creatableText()) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:.5em;flex-shrink:0;padding:.5em .75em;border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"]
 		}]
 	}],
@@ -21881,6 +22733,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -22059,6 +22919,7 @@ var NumberInputComponent = class NumberInputComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
@@ -22208,6 +23069,13 @@ var NumberInputComponent = class NumberInputComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -22340,7 +23208,7 @@ var NumberInputComponent = class NumberInputComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n  [style.--ea-number-input-chars]=\"maxDigits()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div\n  class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n  [style.--ea-number-input-chars]=\"maxDigits()\">\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-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"],
 		dependencies: [
 			{
@@ -22350,6 +23218,7 @@ var NumberInputComponent = class NumberInputComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -22395,7 +23264,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => NumberInputComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n  [style.--ea-number-input-chars]=\"maxDigits()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div\n  class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n  [style.--ea-number-input-chars]=\"maxDigits()\">\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-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"]
 		}]
 	}],
@@ -22421,6 +23290,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -22771,10 +23648,13 @@ var PaginatorComponent = class PaginatorComponent {
 					"disabled",
 					"loading",
 					"fullWidth",
+					"align",
 					"uppercase",
 					"icon",
 					"aria-label",
-					"aria-current"
+					"aria-current",
+					"aria-labelledby",
+					"aria-describedby"
 				],
 				outputs: ["clicked"]
 			},
@@ -23577,6 +24457,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -23688,6 +24569,13 @@ var RadioGroupComponent = class RadioGroupComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -23734,7 +24622,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 			multi: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-radio-group-field--2xs{font-size:var(--font-size-2xs)}.ea-radio-group-field--xs{font-size:var(--font-size-xs)}.ea-radio-group-field--sm{font-size:var(--font-size-sm)}.ea-radio-group-field--md{font-size:var(--font-size-md)}.ea-radio-group-field--lg{font-size:var(--font-size-lg)}.ea-radio-group-field--xl{font-size:var(--font-size-xl)}.ea-radio-group{display:flex;flex-direction:column;gap:.5em}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:1em}\n"],
 		dependencies: [{
 			kind: "component",
@@ -23743,6 +24631,7 @@ var RadioGroupComponent = class RadioGroupComponent {
 			inputs: [
 				"text",
 				"icon",
+				"help",
 				"forId",
 				"required",
 				"labelId"
@@ -23776,7 +24665,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => RadioGroupComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-radio-group-field ea-radio-group-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-radio-group-field--2xs{font-size:var(--font-size-2xs)}.ea-radio-group-field--xs{font-size:var(--font-size-xs)}.ea-radio-group-field--sm{font-size:var(--font-size-sm)}.ea-radio-group-field--md{font-size:var(--font-size-md)}.ea-radio-group-field--lg{font-size:var(--font-size-lg)}.ea-radio-group-field--xl{font-size:var(--font-size-xl)}.ea-radio-group{display:flex;flex-direction:column;gap:.5em}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:1em}\n"]
 		}]
 	}],
@@ -23845,6 +24734,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -24025,6 +24922,7 @@ var RangeSliderComponent = class RangeSliderComponent {
 	trackEl = viewChild("trackEl", ...ngDevMode ? [{ debugName: "trackEl" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -24229,6 +25127,13 @@ var RangeSliderComponent = class RangeSliderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -24366,7 +25271,7 @@ var RangeSliderComponent = class RangeSliderComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          <bdi>\n            {{ formatDisplay(clampedValue()[0]) }} –\n            {{ formatDisplay(clampedValue()[1]) }}\n          </bdi>\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-low-label'\">\n      {{ lowThumbLabel() }}\n    </span>\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-high-label'\">\n      {{ highThumbLabel() }}\n    </span>\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        [style.inset-inline-end.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [help]=\"labelHelp()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          <bdi>\n            {{ formatDisplay(clampedValue()[0]) }} –\n            {{ formatDisplay(clampedValue()[1]) }}\n          </bdi>\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-low-label'\">\n      {{ lowThumbLabel() }}\n    </span>\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-high-label'\">\n      {{ highThumbLabel() }}\n    </span>\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        [style.inset-inline-end.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-range-slider-field.ea-range-slider--2xs{font-size:var(--font-size-2xs)}.ea-range-slider-field.ea-range-slider--xs{font-size:var(--font-size-xs)}.ea-range-slider-field.ea-range-slider--sm{font-size:var(--font-size-sm)}.ea-range-slider-field.ea-range-slider--md{font-size:var(--font-size-md)}.ea-range-slider-field.ea-range-slider--lg{font-size:var(--font-size-lg)}.ea-range-slider-field.ea-range-slider--xl{font-size:var(--font-size-xl)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-range-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-range-slider--2xs .ea-range-slider{--ea-range-slider-size: .5rem}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__thumb-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-range-slider__fill{background-color:Highlight}}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-range-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-range-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__thumb:focus-visible{outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-range-slider__minmax-label{font-size:calc(var(--ea-range-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:default}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:default}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
 		dependencies: [
 			{
@@ -24376,6 +25281,7 @@ var RangeSliderComponent = class RangeSliderComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -24421,7 +25327,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => RangeSliderComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          <bdi>\n            {{ formatDisplay(clampedValue()[0]) }} –\n            {{ formatDisplay(clampedValue()[1]) }}\n          </bdi>\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-low-label'\">\n      {{ lowThumbLabel() }}\n    </span>\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-high-label'\">\n      {{ highThumbLabel() }}\n    </span>\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        [style.inset-inline-end.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [help]=\"labelHelp()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          <bdi>\n            {{ formatDisplay(clampedValue()[0]) }} –\n            {{ formatDisplay(clampedValue()[1]) }}\n          </bdi>\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-low-label'\">\n      {{ lowThumbLabel() }}\n    </span>\n    <span\n      class=\"ea-range-slider__thumb-label\"\n      [id]=\"id() + '-high-label'\">\n      {{ highThumbLabel() }}\n    </span>\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        [style.inset-inline-end.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"lowThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"highThumbLabelledBy()\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-range-slider-field.ea-range-slider--2xs{font-size:var(--font-size-2xs)}.ea-range-slider-field.ea-range-slider--xs{font-size:var(--font-size-xs)}.ea-range-slider-field.ea-range-slider--sm{font-size:var(--font-size-sm)}.ea-range-slider-field.ea-range-slider--md{font-size:var(--font-size-md)}.ea-range-slider-field.ea-range-slider--lg{font-size:var(--font-size-lg)}.ea-range-slider-field.ea-range-slider--xl{font-size:var(--font-size-xl)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-range-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-range-slider--2xs .ea-range-slider{--ea-range-slider-size: .5rem}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__thumb-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-range-slider__fill{background-color:Highlight}}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-range-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-range-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-range-slider__thumb:focus-visible{outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-range-slider__minmax-label{font-size:calc(var(--ea-range-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:default}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:default}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-range-slider--error .ea-range-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
 		}]
 	}],
@@ -24446,6 +25352,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -24771,6 +25685,7 @@ var RatingComponent = class RatingComponent {
 	i18n = inject(EagamiI18nService);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -24958,6 +25873,13 @@ var RatingComponent = class RatingComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -25081,7 +26003,7 @@ var RatingComponent = class RatingComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
 		dependencies: [
 			{
@@ -25091,6 +26013,7 @@ var RatingComponent = class RatingComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -25151,7 +26074,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => RatingComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
 		}]
 	}],
@@ -25177,6 +26100,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -25311,6 +26242,7 @@ var SegmentedComponent = class SegmentedComponent {
 	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -25461,6 +26393,13 @@ var SegmentedComponent = class SegmentedComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -25549,7 +26488,7 @@ var SegmentedComponent = class SegmentedComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n  [class.ea-segmented-field--full-width]=\"fullWidth()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div\n  class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n  [class.ea-segmented-field--full-width]=\"fullWidth()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-segmented-field--full-width{width:100%}.ea-segmented-field--2xs{font-size:var(--font-size-2xs)}.ea-segmented-field--xs{font-size:var(--font-size-xs)}.ea-segmented-field--sm{font-size:var(--font-size-sm)}.ea-segmented-field--md{font-size:var(--font-size-md)}.ea-segmented-field--lg{font-size:var(--font-size-lg)}.ea-segmented-field--xl{font-size:var(--font-size-xl)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:.125em;max-width:100%;padding:.125em;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:default}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-size:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option:focus-visible{outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}@media(forced-colors:active){.ea-segmented__option--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-segmented__option--disabled{cursor:default}\n"],
 		dependencies: [
 			{
@@ -25559,6 +26498,7 @@ var SegmentedComponent = class SegmentedComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -25605,7 +26545,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => SegmentedComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n  [class.ea-segmented-field--full-width]=\"fullWidth()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div\n  class=\"ea-segmented-field ea-segmented-field--{{ size() }}\"\n  [class.ea-segmented-field--full-width]=\"fullWidth()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"i === tabStopIndex() ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [":host{display:flex}:host(.ea-segmented-host--full-width){display:block;width:100%}.ea-segmented-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-segmented-field--full-width{width:100%}.ea-segmented-field--2xs{font-size:var(--font-size-2xs)}.ea-segmented-field--xs{font-size:var(--font-size-xs)}.ea-segmented-field--sm{font-size:var(--font-size-sm)}.ea-segmented-field--md{font-size:var(--font-size-md)}.ea-segmented-field--lg{font-size:var(--font-size-lg)}.ea-segmented-field--xl{font-size:var(--font-size-xl)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:.125em;max-width:100%;padding:.125em;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:default}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-size:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-segmented__option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-segmented__option:focus-visible{outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}@media(forced-colors:active){.ea-segmented__option--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-segmented__option--disabled{cursor:default}\n"]
 		}]
 	}],
@@ -25638,6 +26578,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -25734,6 +26682,7 @@ var SliderComponent = class SliderComponent {
 	trackEl = viewChild("trackEl", ...ngDevMode ? [{ debugName: "trackEl" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : 	/* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
@@ -25936,6 +26885,13 @@ var SliderComponent = class SliderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			hint: {
 				classPropertyName: "hint",
 				publicName: "hint",
@@ -26080,7 +27036,7 @@ var SliderComponent = class SliderComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [help]=\"labelHelp()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:default}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:default}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
 		dependencies: [
 			{
@@ -26090,6 +27046,7 @@ var SliderComponent = class SliderComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -26135,7 +27092,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => SliderComponent),
 				multi: true
 			}],
-			template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [icon]=\"labelIcon()\"\n          [help]=\"labelHelp()\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:default}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:default}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
 		}]
 	}],
@@ -26160,6 +27117,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		hint: [{
 			type: i0.Input,
 			args: [{
@@ -26789,6 +27754,9 @@ var SwitchComponent = class SwitchComponent {
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : 	/* istanbul ignore next */ []);
 	errorMessages = input(void 0, ...ngDevMode ? [{ debugName: "errorMessages" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	onIcon = input(void 0, ...ngDevMode ? [{ debugName: "onIcon" }] : 	/* istanbul ignore next */ []);
+	offIcon = input(void 0, ...ngDevMode ? [{ debugName: "offIcon" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
@@ -26812,10 +27780,12 @@ var SwitchComponent = class SwitchComponent {
 	showHint = computed(() => !!this.hint() && !this.hasError(), ...ngDevMode ? [{ debugName: "showHint" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => ({
 		[`ea-switch--${this.size()}`]: true,
+		[`ea-switch--tone-${this.variant()}`]: this.variant() !== "default",
 		"ea-switch--checked": this.checked(),
 		"ea-switch--disabled": this.isDisabled(),
 		"ea-switch--error": this.hasError()
 	}), ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
+	thumbIcon = computed(() => this.checked() ? this.onIcon() : this.offIcon(), ...ngDevMode ? [{ debugName: "thumbIcon" }] : 	/* istanbul ignore next */ []);
 	writeValue(val) {
 		this.checked.set(!!val);
 	}
@@ -26886,6 +27856,27 @@ var SwitchComponent = class SwitchComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			onIcon: {
+				classPropertyName: "onIcon",
+				publicName: "onIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			offIcon: {
+				classPropertyName: "offIcon",
+				publicName: "offIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -26932,23 +27923,40 @@ var SwitchComponent = class SwitchComponent {
 			multi: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-		styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--2xs{font-size:var(--font-size-2xs)}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--disabled{opacity:.45;cursor:default}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"],
-		dependencies: [{
-			kind: "component",
-			type: FieldMessagesComponent,
-			selector: "ea-field-messages",
-			inputs: [
-				"id",
-				"error",
-				"hint"
-			]
-		}, {
-			kind: "directive",
-			type: NgClass,
-			selector: "[ngClass]",
-			inputs: ["class", "ngClass"]
-		}],
+		template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\">\n        @if (thumbIcon(); as icon) {\n          <span\n            class=\"ea-switch__thumb-icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"icon\" />\n          </span>\n        }\n      </span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--2xs{font-size:var(--font-size-2xs)}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--tone-success{--ea-switch-tone: var(--color-success-default);--ea-switch-tone-wash: var(--color-success-muted)}.ea-switch--tone-warning{--ea-switch-tone: var(--color-warning-default);--ea-switch-tone-wash: var(--color-warning-muted)}.ea-switch--tone-error{--ea-switch-tone: var(--color-error-default);--ea-switch-tone-wash: var(--color-error-muted)}.ea-switch--tone-info{--ea-switch-tone: var(--color-info-default);--ea-switch-tone-wash: var(--color-info-muted)}.ea-switch--checked .ea-switch__track{background-color:var(--ea-switch-tone, var(--color-brand-default));border-color:var(--ea-switch-tone, var(--color-brand-default))}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--checked .ea-switch__thumb-icon{color:var(--ea-switch-tone, var(--color-brand-default))}.ea-switch--disabled{opacity:.45;cursor:default}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--ea-switch-tone, var(--color-brand-default))}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--ea-switch-tone-wash, var(--color-bg-muted));border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--ea-switch-tone, var(--color-border-default)));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:flex;align-items:center;justify-content:center;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__thumb-icon{display:inline-flex;font-size:calc(var(--ea-switch-size, 1.25em) * .5);color:var(--ea-switch-tone, var(--color-neutral-600))}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: FieldMessagesComponent,
+				selector: "ea-field-messages",
+				inputs: [
+					"id",
+					"error",
+					"hint"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -26961,15 +27969,19 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ea-switch",
-			imports: [FieldMessagesComponent, NgClass],
+			imports: [
+				FieldMessagesComponent,
+				NgClass,
+				NgComponentOutlet
+			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
 				provide: NG_VALUE_ACCESSOR,
 				useExisting: forwardRef(() => SwitchComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-			styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--2xs{font-size:var(--font-size-2xs)}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--disabled{opacity:.45;cursor:default}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"]
+			template: "<div class=\"ea-switch-field ea-switch-field--{{ size() }}\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\">\n        @if (thumbIcon(); as icon) {\n          <span\n            class=\"ea-switch__thumb-icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"icon\" />\n          </span>\n        }\n      </span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:.375em;--ea-field-messages-size: .8125em}.ea-switch-field--2xs{font-size:var(--font-size-2xs)}.ea-switch-field--xs{font-size:var(--font-size-xs)}.ea-switch-field--sm{font-size:var(--font-size-sm)}.ea-switch-field--md{font-size:var(--font-size-md)}.ea-switch-field--lg{font-size:var(--font-size-lg)}.ea-switch-field--xl{font-size:var(--font-size-xl)}.ea-switch{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--tone-success{--ea-switch-tone: var(--color-success-default);--ea-switch-tone-wash: var(--color-success-muted)}.ea-switch--tone-warning{--ea-switch-tone: var(--color-warning-default);--ea-switch-tone-wash: var(--color-warning-muted)}.ea-switch--tone-error{--ea-switch-tone: var(--color-error-default);--ea-switch-tone-wash: var(--color-error-muted)}.ea-switch--tone-info{--ea-switch-tone: var(--color-info-default);--ea-switch-tone-wash: var(--color-info-muted)}.ea-switch--checked .ea-switch__track{background-color:var(--ea-switch-tone, var(--color-brand-default));border-color:var(--ea-switch-tone, var(--color-brand-default))}@media(forced-colors:active){.ea-switch--checked .ea-switch__track{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-switch--checked .ea-switch__thumb{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-switch--checked .ea-switch__thumb-icon{color:var(--ea-switch-tone, var(--color-brand-default))}.ea-switch--disabled{opacity:.45;cursor:default}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--ea-switch-tone, var(--color-brand-default))}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-switch__input:focus-visible+.ea-switch__track{outline:2px solid Highlight;outline-offset:2px}}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25em) * 1.8);height:var(--ea-switch-size, 1.25em);padding:calc(var(--ea-switch-size, 1.25em) * .1);background-color:var(--ea-switch-tone-wash, var(--color-bg-muted));border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--ea-switch-tone, var(--color-border-default)));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:flex;align-items:center;justify-content:center;width:calc(var(--ea-switch-size, 1.25em) * .8);height:calc(var(--ea-switch-size, 1.25em) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__thumb-icon{display:inline-flex;font-size:calc(var(--ea-switch-size, 1.25em) * .5);color:var(--ea-switch-tone, var(--color-neutral-600))}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -27013,6 +28025,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		onIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onIcon",
+				required: false
+			}]
+		}],
+		offIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offIcon",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -27355,6 +28391,7 @@ var TextareaComponent = class TextareaComponent {
 	textareaEl = viewChild("textareaEl", ...ngDevMode ? [{ debugName: "textareaEl" }] : 	/* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
 		...ngDevMode ? { debugName: "ariaLabel" } : 		/* istanbul ignore next */ {},
 		alias: "aria-label"
@@ -27429,6 +28466,20 @@ var TextareaComponent = class TextareaComponent {
 	focus() {
 		this.textareaEl()?.nativeElement.focus();
 	}
+	getSelection() {
+		const el = this.textareaEl()?.nativeElement;
+		const end = this.value().length;
+		return {
+			start: el?.selectionStart ?? end,
+			end: el?.selectionEnd ?? end
+		};
+	}
+	insertText(text) {
+		const el = this.textareaEl()?.nativeElement;
+		if (!el || this.isDisabled() || this.readonly()) return;
+		el.setRangeText(text, el.selectionStart, el.selectionEnd, "end");
+		el.dispatchEvent(new Event("input", { bubbles: true }));
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.0",
@@ -27458,6 +28509,13 @@ var TextareaComponent = class TextareaComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "aria-label",
@@ -27582,7 +28640,7 @@ 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      [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",
+		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"],
 		dependencies: [
 			{
@@ -27592,6 +28650,7 @@ var TextareaComponent = class TextareaComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -27637,7 +28696,7 @@ 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      [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",
+			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"]
 		}]
 	}],
@@ -27662,6 +28721,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -27967,6 +29034,7 @@ var TimePickerComponent = class TimePickerComponent {
 	injector = inject(Injector);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	labelIcon = input(void 0, ...ngDevMode ? [{ debugName: "labelIcon" }] : 	/* istanbul ignore next */ []);
+	labelHelp = input(void 0, ...ngDevMode ? [{ debugName: "labelHelp" }] : 	/* istanbul ignore next */ []);
 	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : 	/* istanbul ignore next */ []);
@@ -28347,6 +29415,13 @@ var TimePickerComponent = class TimePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelHelp: {
+				classPropertyName: "labelHelp",
+				publicName: "labelHelp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholder: {
 				classPropertyName: "placeholder",
 				publicName: "placeholder",
@@ -28493,7 +29568,7 @@ var TimePickerComponent = class TimePickerComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <div\n        #triggerEl\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        (click)=\"onTriggerClick()\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"ea-time-picker__input\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [id]=\"id()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"readonly()\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"triggerText()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-invalid]=\"hasError() || null\"\n          [attr.aria-describedby]=\"\n            showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n          \"\n          (input)=\"onTriggerInput($event)\"\n          (keydown)=\"handleTriggerKeydown($event)\"\n          (blur)=\"onTriggerBlur()\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		template: "<div class=\"ea-time-picker-field ea-time-picker-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 class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <div\n        #triggerEl\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        (click)=\"onTriggerClick()\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"ea-time-picker__input\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [id]=\"id()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"readonly()\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"triggerText()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-invalid]=\"hasError() || null\"\n          [attr.aria-describedby]=\"\n            showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n          \"\n          (input)=\"onTriggerInput($event)\"\n          (keydown)=\"handleTriggerKeydown($event)\"\n          (blur)=\"onTriggerBlur()\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 		styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"],
 		dependencies: [
 			{
@@ -28518,6 +29593,7 @@ var TimePickerComponent = class TimePickerComponent {
 				inputs: [
 					"text",
 					"icon",
+					"help",
 					"forId",
 					"required",
 					"labelId"
@@ -28597,7 +29673,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => TimePickerComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <div\n        #triggerEl\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        (click)=\"onTriggerClick()\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"ea-time-picker__input\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [id]=\"id()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"readonly()\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"triggerText()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-invalid]=\"hasError() || null\"\n          [attr.aria-describedby]=\"\n            showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n          \"\n          (input)=\"onTriggerInput($event)\"\n          (keydown)=\"handleTriggerKeydown($event)\"\n          (blur)=\"onTriggerBlur()\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			template: "<div class=\"ea-time-picker-field ea-time-picker-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 class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <div\n        #triggerEl\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        (click)=\"onTriggerClick()\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"ea-time-picker__input\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          [id]=\"id()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"readonly()\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"triggerText()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-invalid]=\"hasError() || null\"\n          [attr.aria-describedby]=\"\n            showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n          \"\n          (input)=\"onTriggerInput($event)\"\n          (keydown)=\"handleTriggerKeydown($event)\"\n          (blur)=\"onTriggerBlur()\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
 			styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"]
 		}]
 	}],
@@ -28639,6 +29715,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelHelp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelHelp",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -72269,6 +73353,6 @@ const ICONS = [
 	ZoomInIconComponent,
 	ZoomOutIconComponent
 ].sort((a, b) => a.slug.localeCompare(b.slug));
-export { AccessibilityIconComponent, AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlarmClockIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrayIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowLeftRightIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpDownIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BanIconComponent, BarChart2IconComponent, BarChartComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BoomboxIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CalendarPlusIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CassetteTapeIconComponent, CastIconComponent, CheckCheckIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClipboardPasteIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudSunIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, ContrastIconComponent, CookieIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CosineWaveIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, CrownIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiamondIconComponent, Dice1IconComponent, Dice2IconComponent, Dice3IconComponent, Dice4IconComponent, Dice5IconComponent, Dice6IconComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DoubleExclamationMarkIconComponent, DoubleQuestionMarkIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EjectIconComponent, EmptyStateComponent, EuroIconComponent, ExclamationMarkIconComponent, ExclamationQuestionMarkIconComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileCodeIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FirstPlaceMedalIconComponent, FlagIconComponent, FlameIconComponent, FlaskConicalIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, ForwardIconComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GraduationCapIconComponent, GridIconComponent, GripHorizontalIconComponent, GripVerticalIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeadsetIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, HourglassIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagePlayIconComponent, ImagePlusIconComponent, ImageSearchIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LaptopIconComponent, LayersIconComponent, LayoutDashboardIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, LineChartComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, ListOrderedIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicVocalIconComponent, MicroscopeIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MonitorPlayIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NewspaperIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PAGE_SIZE_ALL, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlaneIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PodcastIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, ProjectorIconComponent, PythonIconComponent, QrCodeIconComponent, QuestionExclamationMarkIconComponent, QuestionMarkIconComponent, QuoteIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RadioReceiverIconComponent, RadioTowerIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, Repeat1IconComponent, RepeatIconComponent, ReplyIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCcwSquareIconComponent, RotateCwIconComponent, RowsIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, ScreenShareIconComponent, SearchIconComponent, SecondPlaceMedalIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldAlertIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SineWaveIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, SquarePlayIconComponent, StarIconComponent, StepBackIconComponent, StepComponent, StepForwardIconComponent, StepperComponent, StopCircleIconComponent, StrikethroughIconComponent, StripeIconComponent, SubtitlesIconComponent, SubtitlesOffIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchCameraIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThirdPlaceMedalIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlinkIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserCircleIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WebcamIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, isGrouped, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
+export { AccessibilityIconComponent, AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlarmClockIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrayIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowLeftRightIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpDownIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BanIconComponent, BarChart2IconComponent, BarChartComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BoomboxIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, ButtonLinkComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CalendarPlusIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CassetteTapeIconComponent, CastIconComponent, CheckCheckIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClipboardPasteIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudSunIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, ContrastIconComponent, CookieIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CosineWaveIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, CrownIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiamondIconComponent, Dice1IconComponent, Dice2IconComponent, Dice3IconComponent, Dice4IconComponent, Dice5IconComponent, Dice6IconComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DoubleExclamationMarkIconComponent, DoubleQuestionMarkIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EjectIconComponent, EmptyStateComponent, EuroIconComponent, ExclamationMarkIconComponent, ExclamationQuestionMarkIconComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileCodeIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FirstPlaceMedalIconComponent, FlagIconComponent, FlameIconComponent, FlaskConicalIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, ForwardIconComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GraduationCapIconComponent, GridIconComponent, GripHorizontalIconComponent, GripVerticalIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeadsetIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, HourglassIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagePlayIconComponent, ImagePlusIconComponent, ImageSearchIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LaptopIconComponent, LayersIconComponent, LayoutDashboardIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, LineChartComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, ListOrderedIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicVocalIconComponent, MicroscopeIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MonitorPlayIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NewspaperIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PAGE_SIZE_ALL, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlaneIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PodcastIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, ProjectorIconComponent, PythonIconComponent, QrCodeIconComponent, QuestionExclamationMarkIconComponent, QuestionMarkIconComponent, QuoteIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RadioReceiverIconComponent, RadioTowerIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, Repeat1IconComponent, RepeatIconComponent, ReplyIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCcwSquareIconComponent, RotateCwIconComponent, RowsIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, ScreenShareIconComponent, SearchIconComponent, SecondPlaceMedalIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldAlertIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SineWaveIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, SquarePlayIconComponent, StarIconComponent, StepBackIconComponent, StepComponent, StepForwardIconComponent, StepperComponent, StopCircleIconComponent, StrikethroughIconComponent, StripeIconComponent, SubtitlesIconComponent, SubtitlesOffIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchCameraIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThirdPlaceMedalIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlinkIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserCircleIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WebcamIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, isGrouped, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
 
 //# sourceMappingURL=eagami-ui.mjs.map