@eagami/ui 1.1.1 → 1.2.0

package/fesm2022/eagami-ui.mjs

@@ -1,8 +1,527 @@
 import * as i0 from '@angular/core';
-import { input, signal, ChangeDetectionStrategy, Component, inject, computed, model, output, viewChild, forwardRef, HostListener, ElementRef, Renderer2, Directive, Injector, effect, untracked, afterNextRender, ViewEncapsulation, contentChild, viewChildren, DestroyRef, Injectable } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, model, output, viewChild, forwardRef, HostListener, ElementRef, Renderer2, Directive, Injector, effect, untracked, afterNextRender, ViewEncapsulation, contentChild, viewChildren, DestroyRef } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+// =============================================================================
+// EAGAMI UI — i18n types
+// =============================================================================
+/** Ordered list of every supported locale — handy for language switchers. */
+const EAGAMI_LOCALES = [
+    'en',
+    'fr-FR',
+    'el',
+    'pl',
+    'es-ES',
+];
+
+/** DI token carrying the consumer-supplied i18n configuration. */
+const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
+/**
+ * Configures Eagami UI for the application. Pass a `locale` to switch every
+ * component's built-in strings (and locale-aware date formatting) at once, and
+ * optionally `messages` to override individual strings.
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideEagamiUi({ locale: 'fr-FR' })],
+ * });
+ * ```
+ *
+ * Calling this is optional — without it the library defaults to English.
+ */
+function provideEagamiUi(config = {}) {
+    return makeEnvironmentProviders([{ provide: EAGAMI_I18N_CONFIG, useValue: config }]);
+}
+
+/** Greek messages. */
+const el = {
+    alert: {
+        dismiss: 'Απόρριψη',
+    },
+    autocomplete: {
+        empty: 'Δεν υπάρχουν αποτελέσματα',
+    },
+    avatarEditor: {
+        upload: 'Μεταφόρτωση εικόνας',
+        dropzone: 'Αποθέστε μια εικόνα ή κάντε κλικ για μεταφόρτωση',
+        canvas: 'Προεπισκόπηση εικόνας, σύρετε ή χρησιμοποιήστε τα βέλη για μετακίνηση, το ρυθμιστικό για ζουμ',
+        change: 'Αλλαγή φωτογραφίας',
+        revert: 'Επαναφορά στο αρχικό',
+        zoomOut: 'Σμίκρυνση',
+        zoom: 'Ζουμ',
+        zoomIn: 'Μεγέθυνση',
+        remove: 'Αφαίρεση εικόνας',
+    },
+    breadcrumbs: {
+        label: 'Διαδρομή πλοήγησης',
+    },
+    codeInput: {
+        groupLabel: length => `Κωδικός επαλήθευσης, ${length} ψηφία`,
+        digitLabel: (index, length) => `Ψηφίο ${index} από ${length}`,
+    },
+    dataTable: {
+        noData: 'Δεν υπάρχουν διαθέσιμα δεδομένα',
+    },
+    datePicker: {
+        placeholder: 'Επιλέξτε ημερομηνία…',
+        clear: 'Εκκαθάριση ημερομηνίας',
+        previousYear: 'Προηγούμενο έτος',
+        previousMonth: 'Προηγούμενος μήνας',
+        nextMonth: 'Επόμενος μήνας',
+        nextYear: 'Επόμενο έτος',
+        today: 'Σήμερα',
+    },
+    dialog: {
+        close: 'Κλείσιμο παραθύρου διαλόγου',
+    },
+    drawer: {
+        close: 'Κλείσιμο πίνακα',
+    },
+    dropdown: {
+        placeholder: 'Επιλέξτε…',
+    },
+    input: {
+        showPassword: 'Εμφάνιση κωδικού πρόσβασης',
+        hidePassword: 'Απόκρυψη κωδικού πρόσβασης',
+    },
+    menu: {
+        label: 'Μενού',
+    },
+    paginator: {
+        label: 'Σελιδοποίηση',
+        rowsPerPage: 'Γραμμές ανά σελίδα:',
+        range: (start, end, total) => `${start}–${end} από ${total}`,
+        previousPage: 'Προηγούμενη σελίδα',
+        nextPage: 'Επόμενη σελίδα',
+    },
+    progressBar: {
+        label: 'Πρόοδος',
+    },
+    spinner: {
+        label: 'Φόρτωση',
+    },
+    tag: {
+        remove: 'Αφαίρεση',
+    },
+    toast: {
+        dismiss: 'Απόρριψη',
+    },
+    wordmark: {
+        overline: 'φτιαγμένο με μεράκι από',
+        tagline: 'κομψός σχεδιασμός ιστού',
+    },
+};
+
+/** English (default / fallback) messages. */
+const en = {
+    alert: {
+        dismiss: 'Dismiss',
+    },
+    autocomplete: {
+        empty: 'No results',
+    },
+    avatarEditor: {
+        upload: 'Upload image',
+        dropzone: 'Drop image or click to upload',
+        canvas: 'Image preview, drag or use arrow keys to pan, slider to zoom',
+        change: 'Change photo',
+        revert: 'Revert to original',
+        zoomOut: 'Zoom out',
+        zoom: 'Zoom',
+        zoomIn: 'Zoom in',
+        remove: 'Remove image',
+    },
+    breadcrumbs: {
+        label: 'Breadcrumb',
+    },
+    codeInput: {
+        groupLabel: length => `Verification code, ${length} digits`,
+        digitLabel: (index, length) => `Digit ${index} of ${length}`,
+    },
+    dataTable: {
+        noData: 'No data available',
+    },
+    datePicker: {
+        placeholder: 'Select date…',
+        clear: 'Clear date',
+        previousYear: 'Previous year',
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        nextYear: 'Next year',
+        today: 'Today',
+    },
+    dialog: {
+        close: 'Close dialog',
+    },
+    drawer: {
+        close: 'Close panel',
+    },
+    dropdown: {
+        placeholder: 'Select…',
+    },
+    input: {
+        showPassword: 'Show password',
+        hidePassword: 'Hide password',
+    },
+    menu: {
+        label: 'Menu',
+    },
+    paginator: {
+        label: 'Pagination',
+        rowsPerPage: 'Rows per page:',
+        range: (start, end, total) => `${start}–${end} of ${total}`,
+        previousPage: 'Previous page',
+        nextPage: 'Next page',
+    },
+    progressBar: {
+        label: 'Progress',
+    },
+    spinner: {
+        label: 'Loading',
+    },
+    tag: {
+        remove: 'Remove',
+    },
+    toast: {
+        dismiss: 'Dismiss',
+    },
+    wordmark: {
+        overline: 'handcrafted by',
+        tagline: 'elegant web design',
+    },
+};
+
+/** Spanish (Spain) messages. */
+const esES = {
+    alert: {
+        dismiss: 'Descartar',
+    },
+    autocomplete: {
+        empty: 'Sin resultados',
+    },
+    avatarEditor: {
+        upload: 'Subir imagen',
+        dropzone: 'Suelta una imagen o haz clic para subir',
+        canvas: 'Vista previa de la imagen, arrastra o usa las flechas para desplazar, el control deslizante para ampliar',
+        change: 'Cambiar foto',
+        revert: 'Revertir al original',
+        zoomOut: 'Alejar',
+        zoom: 'Ampliación',
+        zoomIn: 'Acercar',
+        remove: 'Eliminar imagen',
+    },
+    breadcrumbs: {
+        label: 'Ruta de navegación',
+    },
+    codeInput: {
+        groupLabel: length => `Código de verificación, ${length} dígitos`,
+        digitLabel: (index, length) => `Dígito ${index} de ${length}`,
+    },
+    dataTable: {
+        noData: 'No hay datos disponibles',
+    },
+    datePicker: {
+        placeholder: 'Seleccionar fecha…',
+        clear: 'Borrar fecha',
+        previousYear: 'Año anterior',
+        previousMonth: 'Mes anterior',
+        nextMonth: 'Mes siguiente',
+        nextYear: 'Año siguiente',
+        today: 'Hoy',
+    },
+    dialog: {
+        close: 'Cerrar diálogo',
+    },
+    drawer: {
+        close: 'Cerrar panel',
+    },
+    dropdown: {
+        placeholder: 'Seleccionar…',
+    },
+    input: {
+        showPassword: 'Mostrar contraseña',
+        hidePassword: 'Ocultar contraseña',
+    },
+    menu: {
+        label: 'Menú',
+    },
+    paginator: {
+        label: 'Paginación',
+        rowsPerPage: 'Filas por página:',
+        range: (start, end, total) => `${start}–${end} de ${total}`,
+        previousPage: 'Página anterior',
+        nextPage: 'Página siguiente',
+    },
+    progressBar: {
+        label: 'Progreso',
+    },
+    spinner: {
+        label: 'Cargando',
+    },
+    tag: {
+        remove: 'Eliminar',
+    },
+    toast: {
+        dismiss: 'Descartar',
+    },
+    wordmark: {
+        overline: 'hecho a mano por',
+        tagline: 'diseño web elegante',
+    },
+};
+
+/** French (France) messages. */
+const frFR = {
+    alert: {
+        dismiss: 'Fermer',
+    },
+    autocomplete: {
+        empty: 'Aucun résultat',
+    },
+    avatarEditor: {
+        upload: 'Téléverser une image',
+        dropzone: 'Déposez une image ou cliquez pour téléverser',
+        canvas: "Aperçu de l'image, faites glisser ou utilisez les flèches pour déplacer, le curseur pour zoomer",
+        change: 'Changer la photo',
+        revert: "Revenir à l'original",
+        zoomOut: 'Dézoomer',
+        zoom: 'Zoom',
+        zoomIn: 'Zoomer',
+        remove: "Supprimer l'image",
+    },
+    breadcrumbs: {
+        label: "Fil d'Ariane",
+    },
+    codeInput: {
+        groupLabel: length => `Code de vérification, ${length} chiffres`,
+        digitLabel: (index, length) => `Chiffre ${index} sur ${length}`,
+    },
+    dataTable: {
+        noData: 'Aucune donnée disponible',
+    },
+    datePicker: {
+        placeholder: 'Sélectionner une date…',
+        clear: 'Effacer la date',
+        previousYear: 'Année précédente',
+        previousMonth: 'Mois précédent',
+        nextMonth: 'Mois suivant',
+        nextYear: 'Année suivante',
+        today: "Aujourd'hui",
+    },
+    dialog: {
+        close: 'Fermer la boîte de dialogue',
+    },
+    drawer: {
+        close: 'Fermer le panneau',
+    },
+    dropdown: {
+        placeholder: 'Sélectionner…',
+    },
+    input: {
+        showPassword: 'Afficher le mot de passe',
+        hidePassword: 'Masquer le mot de passe',
+    },
+    menu: {
+        label: 'Menu',
+    },
+    paginator: {
+        label: 'Pagination',
+        rowsPerPage: 'Lignes par page :',
+        range: (start, end, total) => `${start}–${end} sur ${total}`,
+        previousPage: 'Page précédente',
+        nextPage: 'Page suivante',
+    },
+    progressBar: {
+        label: 'Progression',
+    },
+    spinner: {
+        label: 'Chargement',
+    },
+    tag: {
+        remove: 'Supprimer',
+    },
+    toast: {
+        dismiss: 'Fermer',
+    },
+    wordmark: {
+        overline: 'conçu avec soin par',
+        tagline: 'design web élégant',
+    },
+};
+
+/** Polish messages. */
+const pl = {
+    alert: {
+        dismiss: 'Zamknij',
+    },
+    autocomplete: {
+        empty: 'Brak wyników',
+    },
+    avatarEditor: {
+        upload: 'Prześlij obraz',
+        dropzone: 'Upuść obraz lub kliknij, aby przesłać',
+        canvas: 'Podgląd obrazu, przeciągnij lub użyj strzałek, aby przesunąć, suwaka, aby przybliżyć',
+        change: 'Zmień zdjęcie',
+        revert: 'Przywróć oryginał',
+        zoomOut: 'Pomniejsz',
+        zoom: 'Powiększenie',
+        zoomIn: 'Powiększ',
+        remove: 'Usuń obraz',
+    },
+    breadcrumbs: {
+        label: 'Ścieżka nawigacji',
+    },
+    codeInput: {
+        groupLabel: length => `Kod weryfikacyjny, ${length} cyfr`,
+        digitLabel: (index, length) => `Cyfra ${index} z ${length}`,
+    },
+    dataTable: {
+        noData: 'Brak dostępnych danych',
+    },
+    datePicker: {
+        placeholder: 'Wybierz datę…',
+        clear: 'Wyczyść datę',
+        previousYear: 'Poprzedni rok',
+        previousMonth: 'Poprzedni miesiąc',
+        nextMonth: 'Następny miesiąc',
+        nextYear: 'Następny rok',
+        today: 'Dzisiaj',
+    },
+    dialog: {
+        close: 'Zamknij okno dialogowe',
+    },
+    drawer: {
+        close: 'Zamknij panel',
+    },
+    dropdown: {
+        placeholder: 'Wybierz…',
+    },
+    input: {
+        showPassword: 'Pokaż hasło',
+        hidePassword: 'Ukryj hasło',
+    },
+    menu: {
+        label: 'Menu',
+    },
+    paginator: {
+        label: 'Paginacja',
+        rowsPerPage: 'Wierszy na stronę:',
+        range: (start, end, total) => `${start}–${end} z ${total}`,
+        previousPage: 'Poprzednia strona',
+        nextPage: 'Następna strona',
+    },
+    progressBar: {
+        label: 'Postęp',
+    },
+    spinner: {
+        label: 'Ładowanie',
+    },
+    tag: {
+        remove: 'Usuń',
+    },
+    toast: {
+        dismiss: 'Zamknij',
+    },
+    wordmark: {
+        overline: 'ręcznie wykonane przez',
+        tagline: 'elegancki projekt stron',
+    },
+};
+
+/** Built-in message dictionaries, keyed by locale. */
+const EAGAMI_MESSAGES = {
+    en,
+    'fr-FR': frFR,
+    el,
+    pl,
+    'es-ES': esES,
+};
+
+/** Shallow-merges per-component override groups over a complete base dictionary. */
+function applyOverrides(base, overrides) {
+    const merged = {};
+    for (const key of Object.keys(base)) {
+        merged[key] = { ...base[key], ...overrides[key] };
+    }
+    return merged;
+}
+/**
+ * Holds the active locale and resolves the matching message dictionary for
+ * every Eagami UI component. The `locale` signal is reactive, so changing it
+ * at runtime re-renders all components with the new strings. Unknown locales
+ * (or missing keys via partial overrides) fall back to English.
+ */
+class EagamiI18nService {
+    config = inject(EAGAMI_I18N_CONFIG, { optional: true });
+    _locale = signal(this.config?.locale ?? 'en', ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
+    /** The currently active locale. Read it reactively or call `setLocale()`. */
+    locale = this._locale.asReadonly();
+    /** The resolved message dictionary for the active locale. */
+    messages = computed(() => {
+        const base = EAGAMI_MESSAGES[this._locale()] ?? en;
+        const overrides = this.config?.messages;
+        return overrides ? applyOverrides(base, overrides) : base;
+    }, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Switches the active locale; falls back to English if unsupported. */
+    setLocale(locale) {
+        this._locale.set(EAGAMI_MESSAGES[locale] ? locale : 'en');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EagamiI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EagamiI18nService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EagamiI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// =============================================================================
+// EAGAMI UI — French spacing helper
+// =============================================================================
+// Pattern: ASCII space (0x20) followed by a closing "high" punctuation mark.
+// French typography wants an "espace fine insécable" (narrow non-breaking
+// space, U+202F) in this position, not a regular breakable space. The match
+// deliberately excludes U+202F and U+00A0 so the function is idempotent.
+const SPACE_BEFORE_HIGH_PUNCT = / ([!?:;»])/g;
+// Pattern: opening guillemet followed by an ASCII space — symmetric rule for
+// the inside of French quotation marks.
+const SPACE_AFTER_OPEN_GUILLEMET = /(«) /g;
+/**
+ * Replaces regular spaces with U+202F (narrow non-breaking space) in the
+ * positions where standard French typography requires "espace fine insécable":
+ * before `!` `?` `:` `;` `»`, and after `«`. This is what publishers like the
+ * Imprimerie nationale and most French press follow, and it prevents the
+ * punctuation from wrapping onto its own line.
+ *
+ * Opt-in: the library does not auto-apply this to anything. Components render
+ * whatever string they receive. Apply this to consumer-supplied content (user
+ * input, content from your CMS, etc.) that you want to format correctly for a
+ * French audience. The function is idempotent — already-converted text passes
+ * through unchanged.
+ *
+ * Do not apply it to URLs, CSS, JSON, code snippets, or other technical
+ * strings where `:` or `?` have non-prose meaning.
+ *
+ * @example
+ * frenchSpacing('Lignes par page :');
+ * // → 'Lignes par page\u202F:'
+ *
+ * frenchSpacing("Qu'est-ce que c'est ?");
+ * // → "Qu'est-ce que c'est\u202F?"
+ *
+ * frenchSpacing('Il a dit « bonjour ».');
+ * // → 'Il a dit «\u202Fbonjour\u202F».'
+ */
+function frenchSpacing(text) {
+    return text
+        .replace(SPACE_BEFORE_HIGH_PUNCT, ' $1')
+        .replace(SPACE_AFTER_OPEN_GUILLEMET, '$1 ');
+}
+
+// =============================================================================
+// EAGAMI UI — i18n public surface
+// =============================================================================
+
 /**
  * Container for expandable content sections. By default only one item can be
  * open at a time; set `multi` to allow several to stay expanded together.
@@ -305,6 +824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * binding and an automatically chosen ARIA role based on severity.
  */
 class AlertComponent {
+    i18n = inject(EagamiI18nService);
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
     visible = model(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
@@ -323,7 +843,7 @@ class AlertComponent {
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -332,7 +852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         CheckIconComponent,
                         InfoIconComponent,
                         XIconComponent,
-                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
+                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
 /**
@@ -344,6 +864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AutocompleteComponent {
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     hostEl = viewChild('hostEl', ...(ngDevMode ? [{ debugName: "hostEl" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -356,7 +877,7 @@ class AutocompleteComponent {
     errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     minLength = input(0, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
     maxResults = input(10, ...(ngDevMode ? [{ debugName: "maxResults" }] : /* istanbul ignore next */ []));
-    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyMessage = input(undefined, ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     id = input(`ea-autocomplete-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way value binding (current text value in the input)
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -396,6 +917,8 @@ class AutocompleteComponent {
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     showList = computed(() => this.isOpen() && this.value().length >= this.minLength(), ...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
     showEmpty = computed(() => this.showList() && this.filteredOptions().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    /** Empty-list message, falling back to the active locale's translation. */
+    resolvedEmptyMessage = computed(() => this.emptyMessage() ?? this.i18n.messages().autocomplete.empty, ...(ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : /* istanbul ignore next */ []));
     wrapperClasses = computed(() => ({
         [`ea-autocomplete__wrapper--${this.size()}`]: true,
         'ea-autocomplete__wrapper--error': this.hasError(),
@@ -523,7 +1046,7 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\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      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-expanded]=\"isOpen()\"\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  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;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--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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:not-allowed}.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{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;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(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\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      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-expanded]=\"isOpen()\"\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  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;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--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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:not-allowed}.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{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;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(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -533,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\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      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-expanded]=\"isOpen()\"\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  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;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--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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:not-allowed}.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{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;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(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"] }]
+                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\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      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-expanded]=\"isOpen()\"\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  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;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--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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:not-allowed}.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{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;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(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"] }]
         }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -1010,6 +1533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AvatarEditorComponent {
     canvasEl = viewChild('canvasEl', ...(ngDevMode ? [{ debugName: "canvasEl" }] : /* istanbul ignore next */ []));
     fileInputEl = viewChild('fileInputEl', ...(ngDevMode ? [{ debugName: "fileInputEl" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
     shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     canvasSize = input(200, ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
     currentSrc = input(undefined, ...(ngDevMode ? [{ debugName: "currentSrc" }] : /* istanbul ignore next */ []));
@@ -1533,7 +2057,7 @@ class AvatarEditorComponent {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    aria-label=\"Upload image\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          aria-label=\"Image preview, drag or use arrow keys to pan, slider to zoom\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [attr.aria-label]=\"i18n.messages().avatarEditor.upload\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarEditorComponent, decorators: [{
             type: Component,
@@ -1547,7 +2071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         TrashIconComponent,
                         UploadIconComponent,
                         TooltipDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    aria-label=\"Upload image\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          aria-label=\"Image preview, drag or use arrow keys to pan, slider to zoom\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [attr.aria-label]=\"i18n.messages().avatarEditor.upload\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], errored: [{ type: i0.Output, args: ["errored"] }], cropStateChanged: [{ type: i0.Output, args: ["cropStateChanged"] }] } });
 
 class UserIconComponent {
@@ -1692,11 +2216,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * always treated as the current page and is non-interactive.
  */
 class BreadcrumbsComponent {
+    i18n = inject(EagamiI18nService);
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** Fires when a non-disabled, non-final breadcrumb is activated. */
     clicked = output();
+    /** Accessible label for the breadcrumb nav, falling back to the active locale. */
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? this.i18n.messages().breadcrumbs.label, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
     isLast(index) {
         return index === this.items().length - 1;
     }
@@ -1708,11 +2235,11 @@ class BreadcrumbsComponent {
         this.clicked.emit({ item, index, event });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"], dependencies: [{ kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"], dependencies: [{ kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-breadcrumbs', imports: [ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"] }]
+            args: [{ selector: 'ea-breadcrumbs', imports: [ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"resolvedAriaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -2035,6 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * `model()` binding.
  */
 class DataTableComponent {
+    i18n = inject(EagamiI18nService);
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
@@ -2043,11 +2571,13 @@ class DataTableComponent {
     striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
     hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
     bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
-    noDataText = input('No data available', ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
+    noDataText = input(undefined, ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
     sort = model({ column: '', direction: null }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
     /** Fires whenever the sort column or direction changes via header click. */
     sorted = output();
     noDataTemplate = contentChild('noData', ...(ngDevMode ? [{ debugName: "noDataTemplate" }] : /* istanbul ignore next */ []));
+    /** Empty-state text, falling back to the active locale's translation. */
+    resolvedNoDataText = computed(() => this.noDataText() ?? this.i18n.messages().dataTable.noData, ...(ngDevMode ? [{ debugName: "resolvedNoDataText" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-data-table--${this.density()}`]: true,
         'ea-data-table--sticky': this.stickyHeader(),
@@ -2110,7 +2640,7 @@ class DataTableComponent {
         return key ? item[key] : _index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <div class=\"ea-data-table__scroll\">\n    <table class=\"ea-data-table__table\">\n      <thead class=\"ea-data-table__head\">\n        <tr class=\"ea-data-table__row ea-data-table__row--header\">\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (click)=\"onHeaderClick(col)\"\n              (keydown.enter)=\"onHeaderClick(col)\"\n              (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n              [attr.tabindex]=\"col.sortable ? 0 : null\">\n              @if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n              @if (col.sortable) {\n                <span class=\"ea-data-table__sort-icon\">\n                  @if (sort().column === col.key && sort().direction === 'asc') {\n                    <ea-icon-arrow-up />\n                  } @else if (sort().column === col.key && sort().direction === 'desc') {\n                    <ea-icon-arrow-down />\n                  } @else {\n                    <ea-icon-chevrons-up-down />\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.colspan]=\"columns().length\">\n              @if (noDataTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n              } @else {\n                {{ noDataText() }}\n              }\n            </td>\n          </tr>\n        } @else {\n          @for (row of sortedData(); track trackByFn($index, row)) {\n            <tr\n              class=\"ea-data-table__row\"\n              role=\"row\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  role=\"gridcell\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table class=\"ea-data-table__table\">\n      <thead class=\"ea-data-table__head\">\n        <tr class=\"ea-data-table__row ea-data-table__row--header\">\n          @for (col of columns(); track col.key) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (click)=\"onHeaderClick(col)\"\n              (keydown.enter)=\"onHeaderClick(col)\"\n              (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n              [attr.tabindex]=\"col.sortable ? 0 : null\">\n              @if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n              @if (col.sortable) {\n                <span class=\"ea-data-table__sort-icon\">\n                  @if (sort().column === col.key && sort().direction === 'asc') {\n                    <ea-icon-arrow-up />\n                  } @else if (sort().column === col.key && sort().direction === 'desc') {\n                    <ea-icon-arrow-down />\n                  } @else {\n                    <ea-icon-chevrons-up-down />\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.colspan]=\"columns().length\">\n              @if (noDataTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n              } @else {\n                {{ resolvedNoDataText() }}\n              }\n            </td>\n          </tr>\n        } @else {\n          @for (row of sortedData(); track trackByFn($index, row)) {\n            <tr class=\"ea-data-table__row\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -2120,7 +2650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ArrowUpIconComponent,
                         ArrowDownIconComponent,
                         ChevronsUpDownIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <div class=\"ea-data-table__scroll\">\n    <table class=\"ea-data-table__table\">\n      <thead class=\"ea-data-table__head\">\n        <tr class=\"ea-data-table__row ea-data-table__row--header\">\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (click)=\"onHeaderClick(col)\"\n              (keydown.enter)=\"onHeaderClick(col)\"\n              (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n              [attr.tabindex]=\"col.sortable ? 0 : null\">\n              @if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n              @if (col.sortable) {\n                <span class=\"ea-data-table__sort-icon\">\n                  @if (sort().column === col.key && sort().direction === 'asc') {\n                    <ea-icon-arrow-up />\n                  } @else if (sort().column === col.key && sort().direction === 'desc') {\n                    <ea-icon-arrow-down />\n                  } @else {\n                    <ea-icon-chevrons-up-down />\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.colspan]=\"columns().length\">\n              @if (noDataTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n              } @else {\n                {{ noDataText() }}\n              }\n            </td>\n          </tr>\n        } @else {\n          @for (row of sortedData(); track trackByFn($index, row)) {\n            <tr\n              class=\"ea-data-table__row\"\n              role=\"row\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  role=\"gridcell\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table class=\"ea-data-table__table\">\n      <thead class=\"ea-data-table__head\">\n        <tr class=\"ea-data-table__row ea-data-table__row--header\">\n          @for (col of columns(); track col.key) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (click)=\"onHeaderClick(col)\"\n              (keydown.enter)=\"onHeaderClick(col)\"\n              (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n              [attr.tabindex]=\"col.sortable ? 0 : null\">\n              @if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n              @if (col.sortable) {\n                <span class=\"ea-data-table__sort-icon\">\n                  @if (sort().column === col.key && sort().direction === 'asc') {\n                    <ea-icon-arrow-up />\n                  } @else if (sort().column === col.key && sort().direction === 'desc') {\n                    <ea-icon-arrow-down />\n                  } @else {\n                    <ea-icon-chevrons-up-down />\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.colspan]=\"columns().length\">\n              @if (noDataTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n              } @else {\n                {{ resolvedNoDataText() }}\n              }\n            </td>\n          </tr>\n        } @else {\n          @for (row of sortedData(); track trackByFn($index, row)) {\n            <tr class=\"ea-data-table__row\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
 
 /**
@@ -2130,6 +2660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class CodeInputComponent {
     digitEls = viewChildren('digitEl', ...(ngDevMode ? [{ debugName: "digitEls" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2263,7 +2794,7 @@ class CodeInputComponent {
                 useExisting: forwardRef(() => CodeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\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--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() ? 'Verification code, ' + length() + ' digits' : 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\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        [attr.aria-invalid]=\"hasError() || null\"\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  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.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)}.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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);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(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\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--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\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\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  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.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)}.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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);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(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
@@ -2273,7 +2804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => CodeInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\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--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() ? 'Verification code, ' + length() + ' digits' : 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\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        [attr.aria-invalid]=\"hasError() || null\"\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  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.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)}.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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);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(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\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--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\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\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  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.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)}.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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);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(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { digitEls: [{ type: i0.ViewChildren, args: ['digitEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
 class CalendarIconComponent {
@@ -2408,9 +2939,11 @@ class DatePickerComponent {
     hostEl = viewChild('hostEl', ...(ngDevMode ? [{ debugName: "hostEl" }] : /* istanbul ignore next */ []));
     triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
+    i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('Select date…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when no date is selected. Defaults to the active locale's text. */
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
@@ -2442,6 +2975,10 @@ class DatePickerComponent {
     hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     showError = this.hasError;
     showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    /** Locale used for date formatting — explicit `locale` input, else the global locale. */
+    effectiveLocale = computed(() => this.locale() ?? this.i18n.locale(), ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []));
+    /** Placeholder text — explicit `placeholder` input, else the active locale's default. */
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().datePicker.placeholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
     triggerClasses = computed(() => ({
         [`ea-date-picker__trigger--${this.size()}`]: true,
         'ea-date-picker__trigger--error': this.hasError(),
@@ -2452,18 +2989,20 @@ class DatePickerComponent {
         const val = this.value();
         if (!val)
             return '';
-        return new Intl.DateTimeFormat(this.locale(), this.formatOptions()).format(val);
+        return new Intl.DateTimeFormat(this.effectiveLocale(), this.formatOptions()).format(val);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     monthYearLabel = computed(() => {
         const date = new Date(this.viewYear(), this.viewMonth(), 1);
-        return new Intl.DateTimeFormat(this.locale(), {
+        return new Intl.DateTimeFormat(this.effectiveLocale(), {
             month: 'long',
             year: 'numeric',
         }).format(date);
     }, ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
     weekdayLabels = computed(() => {
         const start = this.weekStartsOn();
-        const formatter = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+        const formatter = new Intl.DateTimeFormat(this.effectiveLocale(), {
+            weekday: 'short',
+        });
         const labels = [];
         // Use a known Sunday (2024-01-07) as anchor so we can offset for locale
         const base = new Date(2024, 0, 7);
@@ -2755,7 +3294,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\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)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || placeholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right 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                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\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                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\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              }\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            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;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:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.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-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\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)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\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          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\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 aria-hidden=\"true\" />\n            <ea-icon-chevron-left 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 aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-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 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 aria-hidden=\"true\" />\n            <ea-icon-chevron-right 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                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\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                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\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              }\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    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;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:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.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-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2771,7 +3310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\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)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || placeholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right 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                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\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                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\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              }\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            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;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:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.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-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
+                    ], template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\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)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\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          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\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 aria-hidden=\"true\" />\n            <ea-icon-chevron-left 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 aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-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 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 aria-hidden=\"true\" />\n            <ea-icon-chevron-right 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                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\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                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\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              }\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    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;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:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.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-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
         }], propDecorators: { hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2786,6 +3325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class DialogComponent {
     dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
+    i18n = inject(EagamiI18nService);
     // Inputs
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
@@ -2845,11 +3385,11 @@ class DialogComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
+            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -2861,6 +3401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class DrawerComponent {
     drawerEl = viewChild('drawerEl', ...(ngDevMode ? [{ debugName: "drawerEl" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
+    i18n = inject(EagamiI18nService);
     // Inputs
     position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -2922,11 +3463,11 @@ class DrawerComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
+            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -2939,9 +3480,10 @@ class DropdownComponent {
     elRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "elRef" }] : /* istanbul ignore next */ []));
     menuEl = viewChild('menuEl', ...(ngDevMode ? [{ debugName: "menuEl" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
+    i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -2971,6 +3513,8 @@ class DropdownComponent {
         const opt = this.options().find(o => o.value === this.value());
         return opt?.label ?? '';
     }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    /** Placeholder text, falling back to the active locale's translation. */
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().dropdown.placeholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
     triggerClasses = computed(() => ({
         [`ea-dropdown__trigger--${this.size()}`]: true,
         'ea-dropdown__trigger--error': this.hasError(),
@@ -3114,7 +3658,7 @@ class DropdownComponent {
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\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      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : 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)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\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      [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]=\"label() ? id() + '-label' : 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)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [id]=\"id() + '-listbox'\">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -3124,7 +3668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\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      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : 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)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\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      [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]=\"label() ? id() + '-label' : 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)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [id]=\"id() + '-listbox'\">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.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{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3512,6 +4056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * inline layouts.
  */
 class EagamiWordmarkComponent {
+    i18n = inject(EagamiI18nService);
     variant = input(1, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     size = input(32, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -3523,26 +4068,29 @@ class EagamiWordmarkComponent {
             return 'eagami';
         return 'eagami design system';
     }, ...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
+    // The brand name itself stays untranslated; only the descriptive overline
+    // and tagline localize.
     ariaLabel = computed(() => {
+        const messages = this.i18n.messages().wordmark;
         switch (this.variant()) {
             case 1:
                 return 'eagami';
             case 2:
-                return 'handcrafted by eagami';
+                return `${messages.overline} eagami`;
             case 3:
                 return 'eagami design system';
             case 4:
-                return 'eagami design system \u2014 elegant web design';
+                return `eagami design system \u2014 ${messages.tagline}`;
         }
     }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EagamiWordmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_size": "size()" } }, ngImport: i0, template: "<a\n  class=\"ea-eagami-wordmark\"\n  [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n  href=\"https://eagami.com\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ea-icon-eagami\n    class=\"ea-eagami-wordmark__logo\"\n    aria-hidden=\"true\" />\n\n  <span class=\"ea-eagami-wordmark__text\">\n    @if (showOverline()) {\n      <span class=\"ea-eagami-wordmark__overline\">handcrafted by</span>\n    }\n    <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n    @if (showTagline()) {\n      @if (layout() === 'inline') {\n        <span\n          class=\"ea-eagami-wordmark__separator\"\n          aria-hidden=\"true\">\n          \u2014\n        </span>\n      }\n      <span class=\"ea-eagami-wordmark__tagline\">elegant web design</span>\n    }\n  </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"], dependencies: [{ kind: "component", type: EagamiIconComponent, selector: "ea-icon-eagami" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_size": "size()" } }, ngImport: i0, template: "<a\n  class=\"ea-eagami-wordmark\"\n  [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n  href=\"https://eagami.com\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ea-icon-eagami\n    class=\"ea-eagami-wordmark__logo\"\n    aria-hidden=\"true\" />\n\n  <span class=\"ea-eagami-wordmark__text\">\n    @if (showOverline()) {\n      <span class=\"ea-eagami-wordmark__overline\">\n        {{ i18n.messages().wordmark.overline }}\n      </span>\n    }\n    <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n    @if (showTagline()) {\n      @if (layout() === 'inline') {\n        <span\n          class=\"ea-eagami-wordmark__separator\"\n          aria-hidden=\"true\">\n          \u2014\n        </span>\n      }\n      <span class=\"ea-eagami-wordmark__tagline\">\n        {{ i18n.messages().wordmark.tagline }}\n      </span>\n    }\n  </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"], dependencies: [{ kind: "component", type: EagamiIconComponent, selector: "ea-icon-eagami" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EagamiWordmarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-eagami-wordmark', imports: [EagamiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--_size]': 'size()',
-                    }, template: "<a\n  class=\"ea-eagami-wordmark\"\n  [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n  href=\"https://eagami.com\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ea-icon-eagami\n    class=\"ea-eagami-wordmark__logo\"\n    aria-hidden=\"true\" />\n\n  <span class=\"ea-eagami-wordmark__text\">\n    @if (showOverline()) {\n      <span class=\"ea-eagami-wordmark__overline\">handcrafted by</span>\n    }\n    <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n    @if (showTagline()) {\n      @if (layout() === 'inline') {\n        <span\n          class=\"ea-eagami-wordmark__separator\"\n          aria-hidden=\"true\">\n          \u2014\n        </span>\n      }\n      <span class=\"ea-eagami-wordmark__tagline\">elegant web design</span>\n    }\n  </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"] }]
+                    }, template: "<a\n  class=\"ea-eagami-wordmark\"\n  [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n  href=\"https://eagami.com\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ea-icon-eagami\n    class=\"ea-eagami-wordmark__logo\"\n    aria-hidden=\"true\" />\n\n  <span class=\"ea-eagami-wordmark__text\">\n    @if (showOverline()) {\n      <span class=\"ea-eagami-wordmark__overline\">\n        {{ i18n.messages().wordmark.overline }}\n      </span>\n    }\n    <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n    @if (showTagline()) {\n      @if (layout() === 'inline') {\n        <span\n          class=\"ea-eagami-wordmark__separator\"\n          aria-hidden=\"true\">\n          \u2014\n        </span>\n      }\n      <span class=\"ea-eagami-wordmark__tagline\">\n        {{ i18n.messages().wordmark.tagline }}\n      </span>\n    }\n  </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
@@ -7930,6 +8478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class InputComponent {
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
@@ -8018,7 +8567,7 @@ class InputComponent {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\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      [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.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\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width: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)}.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:not-allowed}.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: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\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      [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.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\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\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  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width: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)}.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:not-allowed}.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: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -8028,7 +8577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\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      [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.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\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width: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)}.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:not-allowed}.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"] }]
+                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\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      [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.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\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\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  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.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)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.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__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width: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)}.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:not-allowed}.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"] }]
         }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 /**
@@ -8039,11 +8588,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class MenuComponent {
     injector = inject(Injector);
+    i18n = inject(EagamiI18nService);
     listEl = viewChild('listEl', ...(ngDevMode ? [{ debugName: "listEl" }] : /* istanbul ignore next */ []));
     placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Menu', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     id = input(`ea-menu-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the menu, falling back to the active locale. */
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? this.i18n.messages().menu.label, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Fires when the menu opens. */
     opened = output();
@@ -8172,11 +8724,11 @@ class MenuComponent {
         this.triggerRect.set(this.triggerEl.getBoundingClientRect());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-menu', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"] }]
+            args: [{ selector: 'ea-menu', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"] }]
         }], propDecorators: { listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -8276,6 +8828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * event whenever either changes.
  */
 class PaginatorComponent {
+    i18n = inject(EagamiI18nService);
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     showPageSizeSelector = input(true, ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : /* istanbul ignore next */ []));
@@ -8344,11 +8897,11 @@ class PaginatorComponent {
         this.changed.emit({ page: 1, pageSize: newSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);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);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);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);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);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);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
+            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);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);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -8357,6 +8910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * and/or the current percentage.
  */
 class ProgressBarComponent {
+    i18n = inject(EagamiI18nService);
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -8377,11 +8931,11 @@ class ProgressBarComponent {
         'ea-progress-bar--indeterminate': this.indeterminate(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
+            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 /**
@@ -8791,21 +9345,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
- * SVG loading indicator with an accessible `role="status"`. Uses the `label`
- * input as the accessible name announced to assistive technology.
+ * SVG loading indicator with an accessible `role="status"`. The `label` input
+ * overrides the accessible name announced to assistive technology; when unset
+ * it falls back to the active locale's translation.
  */
 class SpinnerComponent {
+    i18n = inject(EagamiI18nService);
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    label = input('Loading', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Accessible label, falling back to the active locale's translation. */
+    resolvedLabel = computed(() => this.label() ?? this.i18n.messages().spinner.label, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-spinner--${this.size()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -8996,16 +9554,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 /**
  * Inline label commonly used to represent filters, categories, or selected
  * items. When `removable`, renders a close button that emits `removed`; the
- * accessible name of that button is configurable via `removeLabel`.
+ * accessible name of that button is configurable via `removeLabel` and
+ * otherwise falls back to the active locale's translation.
  */
 class TagComponent {
+    i18n = inject(EagamiI18nService);
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    removeLabel = input('Remove', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
     /** Fires when the user activates the remove button on a `removable` tag. */
     removed = output();
+    /** Accessible label for the remove button, falling back to the active locale. */
+    resolvedRemoveLabel = computed(() => this.removeLabel() ?? this.i18n.messages().tag.remove, ...(ngDevMode ? [{ debugName: "resolvedRemoveLabel" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-tag--${this.variant()}`]: true,
         [`ea-tag--${this.size()}`]: true,
@@ -9016,11 +9578,11 @@ class TagComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
+            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
@@ -9175,25 +9737,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class ToastComponent {
     toastService = inject(ToastService);
+    i18n = inject(EagamiI18nService);
     getRole(toast) {
         return toast.variant === 'error' || toast.variant === 'warning' ? 'alert' : 'status';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
+            args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
         }] });
 
 // =============================================================================
 // EAGAMI UI — Public API
 // =============================================================================
-// Components
+// Internationalization
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AlertTriangleIconComponent, AppleIconComponent, ArchiveIconComponent, ArrowDownIconComponent, ArrowLeftIconComponent, ArrowRightIconComponent, ArrowUpIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, BarChartIconComponent, BellIconComponent, BookmarkIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarIconComponent, CameraIconComponent, CardComponent, CheckCircleIconComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsUpDownIconComponent, ClipboardIconComponent, ClockIconComponent, CloudIconComponent, CodeInputComponent, CopyIconComponent, CreditCardIconComponent, DataTableComponent, DatePickerComponent, DialogComponent, DividerComponent, DollarSignIconComponent, DownloadIconComponent, DrawerComponent, DropdownComponent, EagamiIconComponent, EagamiWordmarkComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, FacebookIconComponent, FileIconComponent, FilterIconComponent, FlagIconComponent, FolderIconComponent, GiftIconComponent, GithubIconComponent, GlobeIconComponent, GoogleIconComponent, HashIconComponent, HeartIconComponent, HelpCircleIconComponent, HomeIconComponent, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, LinkIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapPinIconComponent, MaximizeIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MicIconComponent, MicrosoftIconComponent, MinimizeIconComponent, MinusIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseIconComponent, PencilIconComponent, PhoneIconComponent, PlayIconComponent, PlusIconComponent, PrinterIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RefreshCwIconComponent, RotateCcwIconComponent, SaveIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, SettingsIconComponent, ShareIconComponent, ShieldIconComponent, ShoppingCartIconComponent, SkeletonComponent, SliderComponent, SmartphoneIconComponent, SpinnerComponent, StarIconComponent, SunIconComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, TrendingUpIconComponent, UnlockIconComponent, UploadIconComponent, UserIconComponent, UsersIconComponent, VideoIconComponent, Volume2IconComponent, WifiIconComponent, XCircleIconComponent, XIconComponent, XTwitterIconComponent, ZapIconComponent };
+export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AlertTriangleIconComponent, AppleIconComponent, ArchiveIconComponent, ArrowDownIconComponent, ArrowLeftIconComponent, ArrowRightIconComponent, ArrowUpIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, BarChartIconComponent, BellIconComponent, BookmarkIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarIconComponent, CameraIconComponent, CardComponent, CheckCircleIconComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsUpDownIconComponent, ClipboardIconComponent, ClockIconComponent, CloudIconComponent, CodeInputComponent, CopyIconComponent, CreditCardIconComponent, DataTableComponent, DatePickerComponent, DialogComponent, DividerComponent, DollarSignIconComponent, DownloadIconComponent, DrawerComponent, DropdownComponent, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_MESSAGES, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, FacebookIconComponent, FileIconComponent, FilterIconComponent, FlagIconComponent, FolderIconComponent, GiftIconComponent, GithubIconComponent, GlobeIconComponent, GoogleIconComponent, HashIconComponent, HeartIconComponent, HelpCircleIconComponent, HomeIconComponent, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, LinkIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapPinIconComponent, MaximizeIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MicIconComponent, MicrosoftIconComponent, MinimizeIconComponent, MinusIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseIconComponent, PencilIconComponent, PhoneIconComponent, PlayIconComponent, PlusIconComponent, PrinterIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RefreshCwIconComponent, RotateCcwIconComponent, SaveIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, SettingsIconComponent, ShareIconComponent, ShieldIconComponent, ShoppingCartIconComponent, SkeletonComponent, SliderComponent, SmartphoneIconComponent, SpinnerComponent, StarIconComponent, SunIconComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, TrendingUpIconComponent, UnlockIconComponent, UploadIconComponent, UserIconComponent, UsersIconComponent, VideoIconComponent, Volume2IconComponent, WifiIconComponent, XCircleIconComponent, XIconComponent, XTwitterIconComponent, ZapIconComponent, el, en, esES, frFR, frenchSpacing, pl, provideEagamiUi };
 //# sourceMappingURL=eagami-ui.mjs.map