@eagami/ui 1.5.0 → 2.0.0

package/fesm2022/eagami-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, viewChild, forwardRef, HostListener, ElementRef, Renderer2, Injector, effect, untracked, afterNextRender, ViewEncapsulation, DestroyRef, contentChild, viewChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, signal, inject, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, viewChild, forwardRef, HostListener, ElementRef, Renderer2, Injector, untracked, afterNextRender, ViewEncapsulation, DestroyRef, contentChild, viewChildren } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -34,6 +34,18 @@ function provideEagamiUi(config = {}) {
     return makeEnvironmentProviders([{ provide: EAGAMI_I18N_CONFIG, useValue: config }]);
 }
 
+/**
+ * Module-level signal that lets external tooling (notably the Storybook
+ * preview decorator) imperatively override the active locale on a running
+ * `EagamiI18nService` without re-bootstrapping the Angular application.
+ *
+ * `null` means "no override" — the service uses its constructor-time locale.
+ *
+ * @internal Not part of the public API. Library consumers should call
+ *           `EagamiI18nService.setLocale()` instead.
+ */
+const _eagamiI18nLocaleOverride = signal(null, ...(ngDevMode ? [{ debugName: "_eagamiI18nLocaleOverride" }] : /* istanbul ignore next */ []));
+
 /** Greek messages. */
 const el = {
     alert: {
@@ -98,6 +110,15 @@ const el = {
     menu: {
         label: 'Μενού',
     },
+    multiSelect: {
+        placeholder: 'Επιλέξτε…',
+        searchPlaceholder: 'Αναζήτηση…',
+        searchEmpty: 'Δεν βρέθηκαν αποτελέσματα',
+        selectAll: 'Επιλογή όλων',
+        clearAll: 'Εκκαθάριση επιλογής',
+        removeOption: label => `Αφαίρεση ${label}`,
+        selectedCount: count => `${count} επιλεγμέν${count === 1 ? 'ο' : 'α'}`,
+    },
     paginator: {
         label: 'Σελιδοποίηση',
         rowsPerPage: 'Γραμμές ανά σελίδα:',
@@ -111,9 +132,27 @@ const el = {
     spinner: {
         label: 'Φόρτωση',
     },
+    stepper: {
+        optional: 'προαιρετικό',
+    },
     tag: {
         remove: 'Αφαίρεση',
     },
+    timePicker: {
+        placeholder: 'Επιλογή ώρας…',
+        clear: 'Καθαρισμός ώρας',
+        hoursLabel: 'Ώρες',
+        minutesLabel: 'Λεπτά',
+        secondsLabel: 'Δευτερόλεπτα',
+        incrementHours: 'Αύξηση ωρών',
+        decrementHours: 'Μείωση ωρών',
+        incrementMinutes: 'Αύξηση λεπτών',
+        decrementMinutes: 'Μείωση λεπτών',
+        incrementSeconds: 'Αύξηση δευτερολέπτων',
+        decrementSeconds: 'Μείωση δευτερολέπτων',
+        amLabel: 'πμ',
+        pmLabel: 'μμ',
+    },
     toast: {
         dismiss: 'Απόρριψη',
     },
@@ -187,6 +226,15 @@ const en = {
     menu: {
         label: 'Menu',
     },
+    multiSelect: {
+        placeholder: 'Select…',
+        searchPlaceholder: 'Search…',
+        searchEmpty: 'No matches',
+        selectAll: 'Select all',
+        clearAll: 'Clear selection',
+        removeOption: label => `Remove ${label}`,
+        selectedCount: count => `${count} selected`,
+    },
     paginator: {
         label: 'Pagination',
         rowsPerPage: 'Rows per page:',
@@ -200,9 +248,27 @@ const en = {
     spinner: {
         label: 'Loading',
     },
+    stepper: {
+        optional: 'optional',
+    },
     tag: {
         remove: 'Remove',
     },
+    timePicker: {
+        placeholder: 'Select time…',
+        clear: 'Clear time',
+        hoursLabel: 'Hours',
+        minutesLabel: 'Minutes',
+        secondsLabel: 'Seconds',
+        incrementHours: 'Increment hours',
+        decrementHours: 'Decrement hours',
+        incrementMinutes: 'Increment minutes',
+        decrementMinutes: 'Decrement minutes',
+        incrementSeconds: 'Increment seconds',
+        decrementSeconds: 'Decrement seconds',
+        amLabel: 'AM',
+        pmLabel: 'PM',
+    },
     toast: {
         dismiss: 'Dismiss',
     },
@@ -276,6 +342,15 @@ const esES = {
     menu: {
         label: 'Menú',
     },
+    multiSelect: {
+        placeholder: 'Seleccionar…',
+        searchPlaceholder: 'Buscar…',
+        searchEmpty: 'Sin coincidencias',
+        selectAll: 'Seleccionar todo',
+        clearAll: 'Borrar selección',
+        removeOption: label => `Eliminar ${label}`,
+        selectedCount: count => `${count} seleccionado${count === 1 ? '' : 's'}`,
+    },
     paginator: {
         label: 'Paginación',
         rowsPerPage: 'Filas por página:',
@@ -289,9 +364,27 @@ const esES = {
     spinner: {
         label: 'Cargando',
     },
+    stepper: {
+        optional: 'opcional',
+    },
     tag: {
         remove: 'Eliminar',
     },
+    timePicker: {
+        placeholder: 'Seleccionar hora…',
+        clear: 'Borrar hora',
+        hoursLabel: 'Horas',
+        minutesLabel: 'Minutos',
+        secondsLabel: 'Segundos',
+        incrementHours: 'Aumentar horas',
+        decrementHours: 'Disminuir horas',
+        incrementMinutes: 'Aumentar minutos',
+        decrementMinutes: 'Disminuir minutos',
+        incrementSeconds: 'Aumentar segundos',
+        decrementSeconds: 'Disminuir segundos',
+        amLabel: 'AM',
+        pmLabel: 'PM',
+    },
     toast: {
         dismiss: 'Descartar',
     },
@@ -365,6 +458,15 @@ const frFR = {
     menu: {
         label: 'Menu',
     },
+    multiSelect: {
+        placeholder: 'Sélectionner…',
+        searchPlaceholder: 'Rechercher…',
+        searchEmpty: 'Aucun résultat',
+        selectAll: 'Tout sélectionner',
+        clearAll: 'Effacer la sélection',
+        removeOption: label => `Supprimer ${label}`,
+        selectedCount: count => `${count} sélectionné${count > 1 ? 's' : ''}`,
+    },
     paginator: {
         label: 'Pagination',
         rowsPerPage: 'Lignes par page :',
@@ -378,9 +480,27 @@ const frFR = {
     spinner: {
         label: 'Chargement',
     },
+    stepper: {
+        optional: 'facultatif',
+    },
     tag: {
         remove: 'Supprimer',
     },
+    timePicker: {
+        placeholder: 'Sélectionner une heure…',
+        clear: "Effacer l'heure",
+        hoursLabel: 'Heures',
+        minutesLabel: 'Minutes',
+        secondsLabel: 'Secondes',
+        incrementHours: 'Augmenter les heures',
+        decrementHours: 'Diminuer les heures',
+        incrementMinutes: 'Augmenter les minutes',
+        decrementMinutes: 'Diminuer les minutes',
+        incrementSeconds: 'Augmenter les secondes',
+        decrementSeconds: 'Diminuer les secondes',
+        amLabel: 'AM',
+        pmLabel: 'PM',
+    },
     toast: {
         dismiss: 'Fermer',
     },
@@ -454,6 +574,15 @@ const pl = {
     menu: {
         label: 'Menu',
     },
+    multiSelect: {
+        placeholder: 'Wybierz…',
+        searchPlaceholder: 'Szukaj…',
+        searchEmpty: 'Brak wyników',
+        selectAll: 'Zaznacz wszystko',
+        clearAll: 'Wyczyść wybór',
+        removeOption: label => `Usuń ${label}`,
+        selectedCount: count => `Wybrano: ${count}`,
+    },
     paginator: {
         label: 'Paginacja',
         rowsPerPage: 'Wierszy na stronę:',
@@ -467,9 +596,27 @@ const pl = {
     spinner: {
         label: 'Ładowanie',
     },
+    stepper: {
+        optional: 'opcjonalny',
+    },
     tag: {
         remove: 'Usuń',
     },
+    timePicker: {
+        placeholder: 'Wybierz godzinę…',
+        clear: 'Wyczyść godzinę',
+        hoursLabel: 'Godziny',
+        minutesLabel: 'Minuty',
+        secondsLabel: 'Sekundy',
+        incrementHours: 'Zwiększ godziny',
+        decrementHours: 'Zmniejsz godziny',
+        incrementMinutes: 'Zwiększ minuty',
+        decrementMinutes: 'Zmniejsz minuty',
+        incrementSeconds: 'Zwiększ sekundy',
+        decrementSeconds: 'Zmniejsz sekundy',
+        amLabel: 'AM',
+        pmLabel: 'PM',
+    },
     toast: {
         dismiss: 'Zamknij',
     },
@@ -504,9 +651,20 @@ function applyOverrides(base, overrides) {
  */
 class EagamiI18nService {
     config = inject(EAGAMI_I18N_CONFIG, { optional: true });
-    _locale = signal(this.config?.locale ?? 'en', ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
+    _locale = signal(_eagamiI18nLocaleOverride() ?? this.config?.locale ?? 'en', ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
     /** The currently active locale. Read it reactively or call `setLocale()`. */
     locale = this._locale.asReadonly();
+    constructor() {
+        // Pick up tooling-driven locale changes (Storybook globals dropdown). The
+        // override signal is `null` in production — this effect is a no-op for
+        // real applications.
+        effect(() => {
+            const override = _eagamiI18nLocaleOverride();
+            if (override !== null && EAGAMI_MESSAGES[override]) {
+                this._locale.set(override);
+            }
+        });
+    }
     /** The resolved message dictionary for the active locale. */
     messages = computed(() => {
         const base = EAGAMI_MESSAGES[this._locale()] ?? en;
@@ -523,7 +681,7 @@ class EagamiI18nService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EagamiI18nService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // =============================================================================
 // EAGAMI UI — French spacing helper
@@ -1630,6 +1788,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'ea-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ea-skeleton\"\n  [class.ea-skeleton--text]=\"variant() === 'text'\"\n  [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n  [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n  [class.ea-skeleton--animated]=\"animated()\"\n  [style]=\"hostStyles()\"\n  aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
 
+/** True for cardinal placements that centre the popover on the perpendicular axis. */
+function isCardinal(placement) {
+    return (placement === 'top' ||
+        placement === 'bottom' ||
+        placement === 'left' ||
+        placement === 'right');
+}
+/** The dominant side of a placement (`top-start` → `top`, `bottom` → `bottom`, etc.). */
+function side(placement) {
+    if (placement.startsWith('top'))
+        return 'top';
+    if (placement.startsWith('bottom'))
+        return 'bottom';
+    if (placement === 'left')
+        return 'left';
+    return 'right';
+}
+/** Maps `top → bottom`, `bottom-start → top-start`, etc. for flip logic. */
+function flipPlacement(placement) {
+    if (placement === 'top')
+        return 'bottom';
+    if (placement === 'bottom')
+        return 'top';
+    if (placement === 'left')
+        return 'right';
+    if (placement === 'right')
+        return 'left';
+    if (placement === 'top-start')
+        return 'bottom-start';
+    if (placement === 'top-end')
+        return 'bottom-end';
+    if (placement === 'bottom-start')
+        return 'top-start';
+    return 'top-end';
+}
+/** Computes the top/left for a given placement without any flip or clamp logic. */
+function placeRaw(anchor, popover, placement, offset) {
+    const s = side(placement);
+    let top = 0;
+    let left = 0;
+    if (s === 'top') {
+        top = anchor.top - popover.height - offset;
+    }
+    else if (s === 'bottom') {
+        top = anchor.bottom + offset;
+    }
+    else if (s === 'left') {
+        left = anchor.left - popover.width - offset;
+    }
+    else {
+        left = anchor.right + offset;
+    }
+    if (s === 'top' || s === 'bottom') {
+        if (isCardinal(placement)) {
+            left = anchor.left + (anchor.width - popover.width) / 2;
+        }
+        else if (placement === 'top-start' || placement === 'bottom-start') {
+            left = anchor.left;
+        }
+        else {
+            left = anchor.right - popover.width;
+        }
+    }
+    else {
+        top = anchor.top + (anchor.height - popover.height) / 2;
+    }
+    return { top, left };
+}
+/**
+ * Computes the viewport-space top/left for a popover anchored to `anchorRect`,
+ * applying optional flip-on-overflow and edge-clamp logic. Pure function — no
+ * DOM access. Both `<ea-popover>` and `[eaTooltip]` consume this.
+ *
+ * @param anchorRect  The anchor element's `getBoundingClientRect()`.
+ * @param popoverRect Width and height of the popover (post-render measurement).
+ * @param viewport    Viewport dimensions (`window.innerWidth/Height`).
+ * @param options     Placement and behavior flags.
+ */
+function computePopoverPosition(anchorRect, popoverRect, viewport, options) {
+    const offset = options.offset ?? 4;
+    const margin = options.margin ?? 8;
+    const flip = options.flip ?? true;
+    const clamp = options.clamp ?? true;
+    let placement = options.placement;
+    let pos = placeRaw(anchorRect, popoverRect, placement, offset);
+    if (flip) {
+        const overflowsTop = pos.top < margin;
+        const overflowsBottom = pos.top + popoverRect.height > viewport.height - margin;
+        const overflowsLeft = pos.left < margin;
+        const overflowsRight = pos.left + popoverRect.width > viewport.width - margin;
+        const s = side(placement);
+        const shouldFlip = (s === 'top' && overflowsTop) ||
+            (s === 'bottom' && overflowsBottom) ||
+            (s === 'left' && overflowsLeft) ||
+            (s === 'right' && overflowsRight);
+        if (shouldFlip) {
+            const flipped = flipPlacement(placement);
+            const flippedPos = placeRaw(anchorRect, popoverRect, flipped, offset);
+            const flippedFitsBetter = (s === 'top' &&
+                flippedPos.top + popoverRect.height <= viewport.height - margin) ||
+                (s === 'bottom' && flippedPos.top >= margin) ||
+                (s === 'left' &&
+                    flippedPos.left + popoverRect.width <= viewport.width - margin) ||
+                (s === 'right' && flippedPos.left >= margin);
+            if (flippedFitsBetter) {
+                placement = flipped;
+                pos = flippedPos;
+            }
+        }
+    }
+    if (clamp) {
+        // Only clamp the cross-axis (perpendicular to the placement). For
+        // bottom-side placements we clamp `left` so the popover doesn't slip off
+        // the left/right of the viewport, but we leave `top` alone — clamping it
+        // when the popover is taller than the available space below the anchor
+        // would yank it up over the anchor itself (the common Storybook-docs-
+        // iframe failure mode where viewports are short). Better to let it
+        // overflow and scroll than to overlap its own trigger.
+        const s = side(placement);
+        const isVertical = s === 'top' || s === 'bottom';
+        if (isVertical) {
+            const maxLeft = viewport.width - popoverRect.width - margin;
+            pos = {
+                top: pos.top,
+                left: Math.max(margin, Math.min(pos.left, Math.max(margin, maxLeft))),
+            };
+        }
+        else {
+            const maxTop = viewport.height - popoverRect.height - margin;
+            pos = {
+                top: Math.max(margin, Math.min(pos.top, Math.max(margin, maxTop))),
+                left: pos.left,
+            };
+        }
+    }
+    return {
+        top: pos.top,
+        left: pos.left,
+        placement,
+        ...(options.matchAnchorWidth ? { width: anchorRect.width } : {}),
+    };
+}
+
 /**
  * Attaches a positioned tooltip to its host element. Shows on hover and
  * focus, hides on leave/blur or Escape, and wires up `aria-describedby` so
@@ -1822,39 +2123,17 @@ class TooltipDirective {
             }
         }
         const tooltipRect = this.tooltipEl.getBoundingClientRect();
-        const gap = 8;
-        /* Keep at least this much breathing room between the tooltip and the
-           viewport edge so the rounded corner and shadow don't kiss the chrome. */
-        const edgePadding = 8;
-        let top;
-        let left;
-        switch (this.tooltipPosition()) {
-            case 'top':
-                top = hostRect.top - tooltipRect.height - gap;
-                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-                break;
-            case 'bottom':
-                top = hostRect.bottom + gap;
-                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-                break;
-            case 'left':
-                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-                left = hostRect.left - tooltipRect.width - gap;
-                break;
-            case 'right':
-                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-                left = hostRect.right + gap;
-                break;
-        }
-        /* Clamp to the viewport so tooltips on near-edge triggers shift inward
-           rather than getting clipped by the chrome. The position arrow (the small
-           caret) stays centered on the host because the clamp only moves the
-           bubble; we don't try to flip placement here, just nudge along the
-           cross-axis. */
-        const viewportWidth = document.documentElement.clientWidth;
-        const viewportHeight = document.documentElement.clientHeight;
-        left = Math.max(edgePadding, Math.min(left, viewportWidth - tooltipRect.width - edgePadding));
-        top = Math.max(edgePadding, Math.min(top, viewportHeight - tooltipRect.height - edgePadding));
+        /* Defer placement math to the shared popover positioning helper. `flip:
+           false` preserves the tooltip's long-standing "stay on the requested
+           side, just nudge inward at the edges" behavior — the caret is centered
+           on the host and would point at empty space if we flipped. `margin: 8`
+           keeps the same breathing room between the bubble and the viewport edge
+           as before. */
+        const placed = computePopoverPosition(hostRect, { width: tooltipRect.width, height: tooltipRect.height }, {
+            width: document.documentElement.clientWidth,
+            height: document.documentElement.clientHeight,
+        }, { placement: this.tooltipPosition(), offset: 8, flip: false, margin: 8 });
+        const { top, left } = placed;
         /* Hide if the calculated bubble would render on top of a sticky/fixed
            overlay (typically the app header). Catches the case where the trigger
            is visible just below the header but a `position: top` tooltip would
@@ -1947,6 +2226,8 @@ class AvatarEditorComponent {
         [`ea-avatar-editor--${this.shape()}`]: true,
         'ea-avatar-editor--has-image': this.hasImage(),
         'ea-avatar-editor--drag-over': this.isDragOver(),
+        'ea-avatar-editor--compact': this.canvasSize() <= 150,
+        'ea-avatar-editor--ultra-compact': this.canvasSize() <= 100,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
     boundWheel = (e) => this.onWheel(e);
@@ -1968,6 +2249,11 @@ class AvatarEditorComponent {
             this.originalCropState = null;
             this.loadFromUrl(src, untracked(() => this.cropState()) ?? null, true);
         });
+        effect(() => {
+            this.canvasSize();
+            if (this.image)
+                this.draw();
+        });
     }
     ngOnDestroy() {
         const canvas = this.canvasEl()?.nativeElement;
@@ -2423,7 +2709,7 @@ class AvatarEditorComponent {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.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: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AvatarEditorComponent, decorators: [{
             type: Component,
@@ -2437,7 +2723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         TooltipDirective,
                         TrashIconComponent,
                         UploadIconComponent,
-                    ], 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"] }]
+                    ], 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--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.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 extends IconComponentBase {
@@ -2534,23 +2820,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
 /**
- * Compact pill-shaped indicator used to communicate status, counts, or labels
- * inline with surrounding content.
+ * Compact indicator used to communicate status, counts, or labels inline with
+ * surrounding content.
  */
 class BadgeComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('pill', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-badge--${this.variant()}`]: true,
         [`ea-badge--${this.size()}`]: true,
+        [`ea-badge--${this.shape()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\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.13", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-700))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-700))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-700))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-700))}.ea-badge--pin{justify-content:center;box-sizing:border-box;padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{min-width:var(--ea-badge-size, 16px);height:var(--ea-badge-size, 16px);font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{min-width:var(--ea-badge-size, 18px);height:var(--ea-badge-size, 18px);font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{min-width:var(--ea-badge-size, 22px);height:var(--ea-badge-size, 22px);font-size:var(--ea-badge-font-size, 12px)}\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.13", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-700))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-700))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-700))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-700))}.ea-badge--pin{justify-content:center;box-sizing:border-box;padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{min-width:var(--ea-badge-size, 16px);height:var(--ea-badge-size, 16px);font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{min-width:var(--ea-badge-size, 18px);height:var(--ea-badge-size, 18px);font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{min-width:var(--ea-badge-size, 22px);height:var(--ea-badge-size, 22px);font-size:var(--ea-badge-font-size, 12px)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
 class ChevronRightIconComponent extends IconComponentBase {
     static slug = 'chevron-right';
@@ -2672,13 +2960,13 @@ class ButtonComponent {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ea-button--full-width]': 'fullWidth()',
-                    }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-current", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -2693,11 +2981,11 @@ class DividerComponent {
         'ea-divider--with-label': !!this.label(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\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.13", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:1.5em;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\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.13", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
+            args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:1.5em;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -2872,6 +3160,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * Floating-element primitive. Renders projected content as `position: fixed`
+ * anchored to an external element, with flip-on-overflow, viewport clamping,
+ * outside-click and Escape dismissal, and SSR-safe scroll / resize handling.
+ *
+ * The primitive is intentionally low-level: a parent component drives the
+ * `[open]` state and listens for `(closeRequested)` to mirror it back. Internal
+ * library components (`<ea-menu>`, `<ea-dropdown>`, `<ea-color-picker>`,
+ * `<ea-date-picker>`, `[eaTooltip]`) compose on top of it; downstream apps can
+ * use it directly to build their own popover-based UI.
+ *
+ * @example
+ * ```html
+ * <button #trigger (click)="open.set(!open())">Open</button>
+ * <ea-popover [anchor]="trigger" [open]="open()" (closeRequested)="open.set(false)">
+ *   <div>Popover content</div>
+ * </ea-popover>
+ * ```
+ */
+class PopoverComponent {
+    destroyRef = inject(DestroyRef);
+    surfaceEl = viewChild('surfaceEl', ...(ngDevMode ? [{ debugName: "surfaceEl" }] : /* istanbul ignore next */ []));
+    /** Anchor element the popover positions itself against. */
+    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /** Whether the popover is currently open. */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Where the popover attaches relative to the anchor. */
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** ARIA role applied to the popover surface. */
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Accessible label. Falls back to nothing; consumers should provide one when no visible heading is in the popover. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** DOM id for the surface so trigger elements can reference it via aria-controls. */
+    surfaceId = input(`ea-popover-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
+    /** Gap in px between the anchor and the popover. */
+    offset = input(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Flip to the opposite side when the requested side overflows the viewport. */
+    flip = input(true, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
+    /** Clamp the popover inside the viewport when it would otherwise overflow. */
+    clamp = input(true, ...(ngDevMode ? [{ debugName: "clamp" }] : /* istanbul ignore next */ []));
+    /** Set the popover's `min-width` to match the anchor's width (dropdown pattern). */
+    matchAnchorWidth = input(false, ...(ngDevMode ? [{ debugName: "matchAnchorWidth" }] : /* istanbul ignore next */ []));
+    /** Close on click outside the popover and the anchor. */
+    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
+    /** Close on Escape. */
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    /** What to do on scroll / resize while open. */
+    scrollBehavior = input('reposition', ...(ngDevMode ? [{ debugName: "scrollBehavior" }] : /* istanbul ignore next */ []));
+    /** Requested close. The parent should mirror this into `[open]`. */
+    closeRequested = output();
+    position = signal(null, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** True placement after flip, for class-based styling (e.g. arrow direction). */
+    effectivePlacement = computed(() => this.position()?.placement ?? this.placement(), ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : /* istanbul ignore next */ []));
+    /** Inline style applied to the surface element. */
+    surfaceStyle = computed(() => {
+        if (!this.open())
+            return { display: 'none' };
+        const p = this.position();
+        // Before the first reposition, hide the surface — at this point it's
+        // sitting at the top-left of the viewport with no coordinates applied
+        // yet, and we don't want a flash on open.
+        if (!p)
+            return { visibility: 'hidden' };
+        const style = {
+            top: `${p.top}px`,
+            left: `${p.left}px`,
+        };
+        if (p.width !== undefined) {
+            style['min-width'] = `${p.width}px`;
+        }
+        return style;
+    }, ...(ngDevMode ? [{ debugName: "surfaceStyle" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Re-measure and reposition whenever the anchor, placement, surface, or
+        // open state changes. Reading `surfaceEl()` here makes it a tracked signal
+        // dependency, so the effect re-runs once Angular has rendered the `@if`
+        // block and the viewChild signal has updated — at that point both the
+        // anchor and the surface have a `getBoundingClientRect`, and the position
+        // can be computed. This is more reliable than `afterNextRender` because it
+        // doesn't depend on a single render cycle landing in the expected order
+        // (some host environments — Storybook docs mode, for example — defer that
+        // callback in a way that leaves the surface stuck at `visibility: hidden`).
+        // Naturally SSR-safe: the surface never renders on the server, so the
+        // effect always early-returns during prerender.
+        // Teleport the surface to `document.body` as soon as it exists so
+        // `position: fixed` is always relative to the actual viewport (escaping
+        // any transformed/contained ancestor that would otherwise create a new
+        // containing block). Doing the move on init — not on open — also means
+        // the first `getBoundingClientRect` call inside `reposition()` reads a
+        // surface that's already in its final DOM home, so the browser's layout
+        // is settled and dimensions are accurate. Skipped in SSR (no `document`).
+        effect(() => {
+            const surface = this.surfaceEl()?.nativeElement;
+            if (surface &&
+                typeof document !== 'undefined' &&
+                surface.parentNode !== document.body) {
+                document.body.appendChild(surface);
+            }
+        });
+        effect(() => {
+            const surface = this.surfaceEl()?.nativeElement;
+            const anchor = this.resolveAnchor();
+            const isOpen = this.open();
+            if (!surface || !anchor || !isOpen) {
+                this.position.set(null);
+                return;
+            }
+            // Re-read inputs so signal subscriptions stay current after a re-open.
+            this.placement();
+            this.offset();
+            this.flip();
+            this.clamp();
+            this.matchAnchorWidth();
+            this.reposition();
+        });
+        // Watch the surface's own size and reposition whenever it changes. The
+        // first `reposition()` after open fires synchronously inside the open
+        // effect, while the surface is still transitioning out of `display: none`
+        // — in some browsers the layout pass hasn't completed, so the
+        // `getBoundingClientRect` width can read as the surface's natural width
+        // even when that overflows the viewport, so the clamp can't kick in. The
+        // ResizeObserver fires once the surface has been laid out with its real
+        // dimensions, giving us a second, accurate measurement to clamp against.
+        // Also catches projected-content size changes while the popover is open
+        // (e.g. virtualised lists adding rows).
+        if (typeof ResizeObserver !== 'undefined') {
+            const surfaceResizeObserver = new ResizeObserver(() => {
+                if (this.open())
+                    this.reposition();
+            });
+            effect(() => {
+                const surface = this.surfaceEl()?.nativeElement;
+                surfaceResizeObserver.disconnect();
+                if (surface)
+                    surfaceResizeObserver.observe(surface);
+            });
+            this.destroyRef.onDestroy(() => surfaceResizeObserver.disconnect());
+        }
+        // Listen for scroll / resize while open. The `scrollBehavior` input picks
+        // the response. SSR guard is required because the website prerenders pages
+        // that mount popovers.
+        if (typeof window !== 'undefined') {
+            const onViewportChange = () => {
+                if (!this.open())
+                    return;
+                const behavior = this.scrollBehavior();
+                if (behavior === 'close') {
+                    this.closeRequested.emit();
+                }
+                else if (behavior === 'reposition') {
+                    this.reposition();
+                }
+            };
+            window.addEventListener('scroll', onViewportChange, {
+                capture: true,
+                passive: true,
+            });
+            window.addEventListener('resize', onViewportChange);
+            this.destroyRef.onDestroy(() => {
+                window.removeEventListener('scroll', onViewportChange, { capture: true });
+                window.removeEventListener('resize', onViewportChange);
+            });
+        }
+        // Explicitly remove the portaled surface on destroy. Angular's view
+        // destruction normally removes nodes the renderer created, but moving the
+        // surface via raw `appendChild` (out of its original anchor slot) is
+        // enough to break that tracking in some host environments — Storybook's
+        // SPA navigation between docs pages, for one, leaves the surface stranded
+        // in `document.body` after the parent component is gone. Removing it here
+        // guarantees cleanup regardless of how Angular's view destruction handles
+        // the relocated node.
+        this.destroyRef.onDestroy(() => {
+            const surface = this.surfaceEl()?.nativeElement;
+            surface?.parentNode?.removeChild(surface);
+        });
+    }
+    resolveAnchor() {
+        const a = this.anchor();
+        if (!a)
+            return null;
+        return a instanceof ElementRef ? a.nativeElement : a;
+    }
+    reposition() {
+        if (typeof window === 'undefined')
+            return;
+        const anchor = this.resolveAnchor();
+        const surface = this.surfaceEl()?.nativeElement;
+        if (!anchor || !surface)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const surfaceRect = surface.getBoundingClientRect();
+        this.position.set(computePopoverPosition(anchorRect, { width: surfaceRect.width, height: surfaceRect.height }, { width: window.innerWidth, height: window.innerHeight }, {
+            placement: this.placement(),
+            offset: this.offset(),
+            flip: this.flip(),
+            clamp: this.clamp(),
+            matchAnchorWidth: this.matchAnchorWidth(),
+        }));
+    }
+    onDocumentClick(event) {
+        if (!this.open() || !this.closeOnOutsideClick())
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        const anchor = this.resolveAnchor();
+        if (anchor?.contains(target))
+            return;
+        if (this.surfaceEl()?.nativeElement.contains(target))
+            return;
+        this.closeRequested.emit();
+    }
+    onEscape() {
+        if (!this.open() || !this.closeOnEscape())
+            return;
+        this.closeRequested.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent \u2014 leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  class=\"ea-popover__surface\"\n  [class]=\"'ea-popover__surface--' + effectivePlacement()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-dropdown);position:fixed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent \u2014 leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  class=\"ea-popover__surface\"\n  [class]=\"'ea-popover__surface--' + effectivePlacement()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-dropdown);position:fixed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { surfaceEl: [{ type: i0.ViewChild, args: ['surfaceEl', { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], matchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchAnchorWidth", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 const DEFAULT_PRESETS = [
     '#ef4444',
     '#f97316',
@@ -2901,14 +3420,11 @@ const DEFAULT_PRESETS = [
  * `ControlValueAccessor`. Accepts any CSS color string in `writeValue`.
  */
 class ColorPickerComponent {
-    hostEl = viewChild('hostEl', ...(ngDevMode ? [{ debugName: "hostEl" }] : /* istanbul ignore next */ []));
     triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-    popoverEl = viewChild('popoverEl', ...(ngDevMode ? [{ debugName: "popoverEl" }] : /* istanbul ignore next */ []));
     svAreaEl = viewChild('svAreaEl', ...(ngDevMode ? [{ debugName: "svAreaEl" }] : /* istanbul ignore next */ []));
     hueTrackEl = viewChild('hueTrackEl', ...(ngDevMode ? [{ debugName: "hueTrackEl" }] : /* istanbul ignore next */ []));
     alphaTrackEl = viewChild('alphaTrackEl', ...(ngDevMode ? [{ debugName: "alphaTrackEl" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
-    destroyRef = inject(DestroyRef);
     i18n = inject(EagamiI18nService);
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2943,10 +3459,6 @@ class ColorPickerComponent {
      * can type a partial value (`#1`, `#12`, `#123…`) without each keystroke being
      * expanded back into a 6-digit canonical form. */
     hexInputValue = signal('', ...(ngDevMode ? [{ debugName: "hexInputValue" }] : /* istanbul ignore next */ []));
-    /** Pixel position of the popover when open. Calculated from the trigger's
-     * bounding rect so the popover can use `position: fixed` and escape any
-     * ancestor with `overflow: hidden`. */
-    popoverPosition = signal(null, ...(ngDevMode ? [{ debugName: "popoverPosition" }] : /* istanbul ignore next */ []));
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
@@ -2981,51 +3493,18 @@ class ColorPickerComponent {
         'ea-color-picker__trigger--open': this.isOpen(),
         'ea-color-picker__trigger--disabled': this.isDisabled(),
     }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
-    /** True when the browser supports the EyeDropper API. */
-    hasEyeDropper = computed(() => {
+    /**
+     * True when the browser supports the EyeDropper API. Not a `computed` —
+     * `window.EyeDropper` isn't a signal, so a memoized computed would cache the
+     * first read (typically `false`, since the popover content's bindings now
+     * evaluate at parent-view creation time via content projection, before any
+     * polyfill / test setup runs). A plain method re-checks on every call.
+     */
+    hasEyeDropper() {
         if (typeof window === 'undefined')
             return false;
         return (typeof window.EyeDropper ===
             'function');
-    }, ...(ngDevMode ? [{ debugName: "hasEyeDropper" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // When the popover opens, anchor it to the trigger using `position: fixed`
-        // coordinates so it escapes any ancestor with `overflow: hidden` (a common
-        // gotcha in scrollable content panels — same pattern as `<ea-dropdown>`).
-        // After the popover renders we measure it and, if it would overflow the
-        // viewport bottom, flip it above the trigger (or clamp against the top
-        // edge when neither direction fits — better than getting trapped below
-        // the fold with no way to scroll, which the page-scroll wouldn't reach
-        // because the popover itself is fixed).
-        effect(() => {
-            const trigger = this.triggerEl()?.nativeElement;
-            if (!trigger || !this.isOpen()) {
-                this.popoverPosition.set(null);
-                return;
-            }
-            const rect = trigger.getBoundingClientRect();
-            this.popoverPosition.set({ top: rect.bottom + 4, left: rect.left });
-            // Re-measure once the popover has actually rendered so we know its height.
-            afterNextRender(() => this.clampPopoverToViewport(), { injector: this.injector });
-        });
-        // Close the popover on scroll / resize rather than try to track the trigger
-        // — same pattern as `<ea-dropdown>`. SSR-guarded because the website
-        // prerenders pages that render this component.
-        if (typeof window !== 'undefined') {
-            const closeOnViewportChange = () => {
-                if (this.isOpen())
-                    this.close();
-            };
-            window.addEventListener('scroll', closeOnViewportChange, {
-                capture: true,
-                passive: true,
-            });
-            window.addEventListener('resize', closeOnViewportChange);
-            this.destroyRef.onDestroy(() => {
-                window.removeEventListener('scroll', closeOnViewportChange, { capture: true });
-                window.removeEventListener('resize', closeOnViewportChange);
-            });
-        }
     }
     // ─── ControlValueAccessor ─────────────────────────────────────────────
     writeValue(val) {
@@ -3366,42 +3845,9 @@ class ColorPickerComponent {
             this.triggerEl()?.nativeElement.focus({ preventScroll: true });
         }
     }
-    onDocumentClick(event) {
-        if (!this.isOpen())
-            return;
-        const host = this.hostEl()?.nativeElement;
-        if (host && !host.contains(event.target))
-            this.close();
-    }
-    /**
-     * Repositions the popover when it would extend past the viewport edges.
-     * Prefers flipping above the trigger when there's more room there, then
-     * clamps so the popover always has a small margin from the viewport edges.
-     */
-    clampPopoverToViewport() {
-        const popover = this.popoverEl()?.nativeElement;
-        const trigger = this.triggerEl()?.nativeElement;
-        const current = this.popoverPosition();
-        if (!popover || !trigger || !current)
-            return;
-        const margin = 8;
-        const triggerRect = trigger.getBoundingClientRect();
-        const popoverRect = popover.getBoundingClientRect();
-        const viewportH = window.innerHeight;
-        const viewportW = window.innerWidth;
-        let top = current.top;
-        const overflowsBottom = top + popoverRect.height > viewportH - margin;
-        const roomAbove = triggerRect.top - margin;
-        if (overflowsBottom && roomAbove >= popoverRect.height + 4) {
-            top = triggerRect.top - popoverRect.height - 4;
-        }
-        else if (overflowsBottom) {
-            top = Math.max(margin, viewportH - popoverRect.height - margin);
-        }
-        const left = Math.max(margin, Math.min(current.left, viewportW - popoverRect.width - margin));
-        if (top !== current.top || left !== current.left) {
-            this.popoverPosition.set({ top, left });
-        }
+    /** Called by `<ea-popover>` when the user clicks outside the picker. */
+    onPopoverCloseRequested() {
+        this.close();
     }
     // ─── Internal: applying state and committing ──────────────────────────
     applyHsv(h, s, v) {
@@ -3436,27 +3882,24 @@ class ColorPickerComponent {
         this.hexInputValue.set(this.hexDisplay());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ColorPickerComponent, isStandalone: true, selector: "ea-color-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ColorPickerComponent, isStandalone: true, selector: "ea-color-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "popoverEl", first: true, predicate: ["popoverEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-color-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-color-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-color-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-color-picker\">\n    <div class=\"ea-color-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-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-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        #popoverEl\n        class=\"ea-color-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-label]=\"label() || i18n.messages().colorPicker.placeholder\"\n        [style.top.px]=\"popoverPosition()?.top\"\n        [style.left.px]=\"popoverPosition()?.left\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-color-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-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-color-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-color-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-color-picker-field__message--hint{color:var(--color-text-secondary)}.ea-color-picker-field__message--error{color:var(--color-error-default)}.ea-color-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-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-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position: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-color-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{position:fixed;z-index:var(--z-index-popover);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);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-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-color-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-color-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-color-picker\">\n    <div class=\"ea-color-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-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-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-color-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-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-color-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-color-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-color-picker-field__message--hint{color:var(--color-text-secondary)}.ea-color-picker-field__message--error{color:var(--color-error-default)}.ea-color-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-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-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position: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-color-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);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-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-color-picker', imports: [AlertCircleIconComponent, DropletIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-color-picker', imports: [AlertCircleIconComponent, DropletIconComponent, NgClass, PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ColorPickerComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-color-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-color-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-color-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-color-picker\">\n    <div class=\"ea-color-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-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-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        #popoverEl\n        class=\"ea-color-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-label]=\"label() || i18n.messages().colorPicker.placeholder\"\n        [style.top.px]=\"popoverPosition()?.top\"\n        [style.left.px]=\"popoverPosition()?.left\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-color-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-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-color-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-color-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-color-picker-field__message--hint{color:var(--color-text-secondary)}.ea-color-picker-field__message--error{color:var(--color-error-default)}.ea-color-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-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-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position: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-color-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{position:fixed;z-index:var(--z-index-popover);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);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-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], popoverEl: [{ type: i0.ViewChild, args: ['popoverEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { 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 }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", 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']]
-            }] } });
+                    ], template: "<div class=\"ea-color-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-color-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-color-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-color-picker\">\n    <div class=\"ea-color-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-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-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-color-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-color-picker-field__message ea-color-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-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-color-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-color-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-color-picker-field__message--hint{color:var(--color-text-secondary)}.ea-color-picker-field__message--error{color:var(--color-error-default)}.ea-color-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-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-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position: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-color-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);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-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
+        }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { 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 }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", 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"] }] } });
 // ─── Pure color helpers (module-private) ──────────────────────────────────
 function clamp01(n) {
     return Math.min(1, Math.max(0, n));
@@ -4268,7 +4711,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Escape). Integrates with Angular forms via `ControlValueAccessor`.
  */
 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);
@@ -4426,8 +4868,12 @@ class DatePickerComponent {
         this.focusedDate.set(null);
     }
     focusFocusedDayCell() {
-        const host = this.hostEl()?.nativeElement;
-        const focusedCell = host?.querySelector('.ea-date-picker__day--focused');
+        // The calendar lives inside the popover surface, which `<ea-popover>`
+        // teleports to `document.body`. Query the document directly so the lookup
+        // works regardless of where the surface is mounted.
+        if (typeof document === 'undefined')
+            return;
+        const focusedCell = document.querySelector('.ea-date-picker__day--focused');
         focusedCell?.focus();
     }
     /** Moves keyboard focus to the trigger button. */
@@ -4572,14 +5018,10 @@ class DatePickerComponent {
             this.viewMonth.set(next.getMonth());
         }
     }
-    onDocumentClick(event) {
-        if (!this.isOpen())
-            return;
-        const host = this.hostEl()?.nativeElement;
-        if (host && !host.contains(event.target)) {
-            this.close();
-            this.onTouched();
-        }
+    /** Called by `<ea-popover>` when the user clicks outside the picker. */
+    onPopoverCloseRequested() {
+        this.close();
+        this.onTouched();
     }
     // Internal helpers
     formatOptions() {
@@ -4620,13 +5062,13 @@ class DatePickerComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DatePickerComponent, isStandalone: true, selector: "ea-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DatePickerComponent, isStandalone: true, selector: "ea-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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() || 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: "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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div 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    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\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    </ea-popover>\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{display:flex;flex-direction:column;gap:var(--space-2);min-width:17.5rem;padding:var(--space-3);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-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: "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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -4636,17 +5078,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         ChevronLeftIconComponent,
                         ChevronRightIconComponent,
                         NgClass,
+                        PopoverComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             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() || 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']]
-            }] } });
+                    ], template: "<div 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    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\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    </ea-popover>\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{display:flex;flex-direction:column;gap:var(--space-2);min-width:17.5rem;padding:var(--space-3);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-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: { 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"] }] } });
 
 /**
  * Modal dialog backed by the native `<dialog>` element. Uses `showModal()`
@@ -4806,12 +5246,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Single-select dropdown with a custom popup list. Supports keyboard
  * navigation (arrow keys, Enter/Space to select, Escape to close), closes
  * on outside click or viewport scroll/resize, and integrates with Angular
- * forms via `ControlValueAccessor`.
+ * forms via `ControlValueAccessor`. Positioning, dismissal, and SSR-safe
+ * scroll handling are provided by `<ea-popover>`.
  */
 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 */ []));
@@ -4853,36 +5292,6 @@ class DropdownComponent {
         'ea-dropdown__trigger--open': this.isOpen(),
         'ea-dropdown__trigger--disabled': this.isDisabled(),
     }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const menu = this.menuEl()?.nativeElement;
-            const trigger = this.elRef()?.nativeElement;
-            if (!menu || !trigger || !this.isOpen())
-                return;
-            const rect = trigger.getBoundingClientRect();
-            menu.style.top = `${rect.bottom + 4}px`;
-            menu.style.left = `${rect.left}px`;
-            menu.style.minWidth = `${rect.width}px`;
-        });
-        // Guard `window` for SSR: the website prerenders 42 routes, and the
-        // dropdown can appear inside any of them. Without this, prerendering
-        // throws `ReferenceError: window is not defined`.
-        if (typeof window !== 'undefined') {
-            const closeOnViewportChange = () => {
-                if (this.isOpen())
-                    this.close();
-            };
-            window.addEventListener('scroll', closeOnViewportChange, {
-                capture: true,
-                passive: true,
-            });
-            window.addEventListener('resize', closeOnViewportChange);
-            this.destroyRef.onDestroy(() => {
-                window.removeEventListener('scroll', closeOnViewportChange, { capture: true });
-                window.removeEventListener('resize', closeOnViewportChange);
-            });
-        }
-    }
     // ControlValueAccessor
     writeValue(val) {
         this.value.set(val ?? '');
@@ -4926,6 +5335,11 @@ class DropdownComponent {
     focus() {
         this.elRef()?.nativeElement.focus();
     }
+    /** Called by `<ea-popover>` when the user clicks outside the dropdown. */
+    onPopoverCloseRequested() {
+        this.close();
+        this.onTouched();
+    }
     handleKeydown(event) {
         if (this.isDisabled() || this.readonly())
             return;
@@ -4978,38 +5392,30 @@ class DropdownComponent {
             this.focusedIndex.set(idx);
         }
     }
-    onDocumentClick(event) {
-        if (!this.isOpen())
-            return;
-        const el = event.target;
-        const host = this.elRef()?.nativeElement.closest('ea-dropdown');
-        if (host && !host.contains(el)) {
-            this.close();
-            this.onTouched();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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-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      <ea-icon-alert-circle class=\"ea-dropdown-field__message-icon\" />\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-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.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: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], 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    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-dropdown__menu\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\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          </div>\n        }\n      </div>\n    </ea-popover>\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      <ea-icon-alert-circle class=\"ea-dropdown-field__message-icon\" />\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-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.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{max-height:15rem;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)}.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: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dropdown', imports: [AlertCircleIconComponent, ChevronDownIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-dropdown', imports: [
+                        AlertCircleIconComponent,
+                        ChevronDownIconComponent,
+                        NgClass,
+                        PopoverComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             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-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      <ea-icon-alert-circle class=\"ea-dropdown-field__message-icon\" />\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-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.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']]
-            }] } });
+                    ], 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    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-dropdown__menu\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\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          </div>\n        }\n      </div>\n    </ea-popover>\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      <ea-icon-alert-circle class=\"ea-dropdown-field__message-icon\" />\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-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.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{max-height:15rem;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)}.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"] }]
+        }], propDecorators: { elRef: [{ 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 }] }], 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"] }] } });
 
 class EagamiIconComponent extends IconComponentBase {
     static slug = 'eagami';
@@ -15477,6 +15883,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+class LeftHalfStarIconComponent extends IconComponentBase {
+    static slug = 'left-half-star';
+    static category = 'eagami';
+    static tags = [
+        'left-half-star',
+        'half-star',
+        'half',
+        'left',
+        'partial',
+        'rating',
+        'star',
+        'shape',
+        'demi-étoile',
+        'demi',
+        'gauche',
+        'media-estrella',
+        'media',
+        'izquierda',
+        'μισό-αστέρι',
+        'μισό',
+        'αριστερά',
+        'pół-gwiazdy',
+        'pół',
+        'lewa',
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LeftHalfStarIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: LeftHalfStarIconComponent, isStandalone: true, selector: "ea-icon-left-half-star", usesInheritance: true, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M12 2 L8.91 8.26 L2 9.27 L7 14.14 L5.82 21.02 L12 17.77 Z" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LeftHalfStarIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-left-half-star',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M12 2 L8.91 8.26 L2 9.27 L7 14.14 L5.82 21.02 L12 17.77 Z" />
+    </svg>
+  `,
+                }]
+        }] });
+
 class LifeBuoyIconComponent extends IconComponentBase {
     static slug = 'life-buoy';
     static category = 'feather';
@@ -20402,6 +20871,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+class RightHalfStarIconComponent extends IconComponentBase {
+    static slug = 'right-half-star';
+    static category = 'eagami';
+    static tags = [
+        'right-half-star',
+        'half-star',
+        'half',
+        'right',
+        'partial',
+        'rating',
+        'star',
+        'shape',
+        'demi-étoile',
+        'demi',
+        'droite',
+        'media-estrella',
+        'media',
+        'derecha',
+        'μισό-αστέρι',
+        'μισό',
+        'δεξιά',
+        'pół-gwiazdy',
+        'pół',
+        'prawa',
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RightHalfStarIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: RightHalfStarIconComponent, isStandalone: true, selector: "ea-icon-right-half-star", usesInheritance: true, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 Z" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RightHalfStarIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-right-half-star',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 Z" />
+    </svg>
+  `,
+                }]
+        }] });
+
 class RotateCwIconComponent extends IconComponentBase {
     static slug = 'rotate-cw';
     static category = 'feather';
@@ -26781,9 +27313,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * the full set. For single-icon usage import the component directly (e.g.
  * `import { HomeIconComponent } from '@eagami/ui'`) and the bundler will
  * tree-shake `ICONS` away.
- *
- * Deprecated aliases (e.g. `PencilIconComponent`) are intentionally excluded
- * so they don't surface in generated catalogues.
  */
 const ICONS = [
     ActivityIconComponent,
@@ -26942,6 +27471,7 @@ const ICONS = [
     LampIconComponent,
     LayersIconComponent,
     LayoutIconComponent,
+    LeftHalfStarIconComponent,
     LifeBuoyIconComponent,
     Link2IconComponent,
     LinkIconComponent,
@@ -27016,6 +27546,7 @@ const ICONS = [
     RefreshCwIconComponent,
     RepeatIconComponent,
     RewindIconComponent,
+    RightHalfStarIconComponent,
     RotateCcwIconComponent,
     RotateCwIconComponent,
     RssIconComponent,
@@ -27111,110 +27642,6 @@ const ICONS = [
     ZoomOutIconComponent,
 ].sort((a, b) => a.slug.localeCompare(b.slug));
 
-/**
- * @deprecated Will be removed in v2.0.0. The icon depicts Apple Inc.'s logo,
- * which is more strictly protected than other brand marks. Source the asset
- * directly from Apple per their brand guidelines for use cases like "Sign in
- * with Apple".
- */
-class AppleIconComponent extends IconComponentBase {
-    brand = input(false, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppleIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: AppleIconComponent, isStandalone: true, selector: "ea-icon-apple", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "brand() ? '#000000' : null" } }, usesInheritance: true, ngImport: i0, template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <path
-        d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09ZM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.32 2.32-1.55 4.3-3.74 4.25Z" />
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppleIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ea-icon-apple',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[style.color]': "brand() ? '#000000' : null" },
-                    template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <path
-        d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09ZM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.32 2.32-1.55 4.3-3.74 4.25Z" />
-    </svg>
-  `,
-                }]
-        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
-
-/**
- * @deprecated Will be removed in v2.0.0. The `pencil` icon depicts the same
- * mark as Feather's canonical `edit-2` (with a marginally different cap
- * curvature) and is being retired as redundant. Switch to `<ea-icon-edit-2>`
- * / `Edit2IconComponent`.
- */
-class PencilIconComponent extends IconComponentBase {
-    static slug = 'pencil';
-    static category = 'feather';
-    static tags = [
-        'edit-2',
-        'edit',
-        '2',
-        'pencil',
-        'modify',
-        'write',
-        'éditer',
-        'crayon',
-        'editar',
-        'lápiz',
-        'επεξεργασία',
-        'μολύβι',
-        'edytuj',
-        'ołówek',
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PencilIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: PencilIconComponent, isStandalone: true, selector: "ea-icon-pencil", usesInheritance: true, ngImport: i0, template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <path d="M17 3a2.83 2.83 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PencilIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ea-icon-pencil',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <path d="M17 3a2.83 2.83 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
-    </svg>
-  `,
-                }]
-        }] });
-
 /**
  * Single-line text field with label, hint, and error message support.
  * Includes a built-in show/hide toggle for `password` inputs and integrates
@@ -27335,7 +27762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Popup action menu attached to any focusable element via the
  * `[eaMenuTrigger]` directive. Supports keyboard navigation
  * (arrow keys, Home/End), closes on outside click or Escape, and restores
- * focus to the trigger on close.
+ * focus to the trigger on close. Positioning, dismissal, and SSR-safe scroll
+ * handling are provided by `<ea-popover>`.
  */
 class MenuComponent {
     injector = inject(Injector);
@@ -27352,32 +27780,8 @@ class MenuComponent {
     opened = output();
     /** Fires when the menu closes. */
     closed = output();
-    triggerEl = null;
-    triggerRect = signal(null, ...(ngDevMode ? [{ debugName: "triggerRect" }] : /* istanbul ignore next */ []));
-    listClasses = computed(() => ({
-        [`ea-menu__list--${this.placement()}`]: true,
-    }), ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
-    listStyle = computed(() => {
-        const rect = this.triggerRect();
-        if (!rect)
-            return {};
-        const placement = this.placement();
-        const gap = 4;
-        const style = {};
-        if (placement === 'bottom-start' || placement === 'bottom-end') {
-            style['top'] = `${rect.bottom + gap}px`;
-        }
-        else {
-            style['bottom'] = `${window.innerHeight - rect.top + gap}px`;
-        }
-        if (placement === 'bottom-start' || placement === 'top-start') {
-            style['left'] = `${rect.left}px`;
-        }
-        else {
-            style['right'] = `${window.innerWidth - rect.right}px`;
-        }
-        return style;
-    }, ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+    /** Trigger element currently anchoring the menu. Signal-typed so `<ea-popover>` reacts when it changes. */
+    triggerEl = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     /** Toggles the menu open state, anchoring it to the given trigger element. */
     toggleAt(triggerEl) {
         if (this.disabled())
@@ -27393,8 +27797,7 @@ class MenuComponent {
     openAt(triggerEl) {
         if (this.disabled())
             return;
-        this.triggerEl = triggerEl;
-        this.triggerRect.set(triggerEl.getBoundingClientRect());
+        this.triggerEl.set(triggerEl);
         this.open.set(true);
         this.opened.emit();
         afterNextRender(() => this.focusFirstItem(), { injector: this.injector });
@@ -27410,7 +27813,11 @@ class MenuComponent {
         this.open.set(false);
         this.closed.emit();
         if (restoreFocus)
-            this.triggerEl?.focus({ preventScroll: true });
+            this.triggerEl()?.focus({ preventScroll: true });
+    }
+    /** Called by `<ea-popover>` when the user clicks outside the menu. */
+    onPopoverCloseRequested() {
+        this.close();
     }
     getEnabledItems() {
         const list = this.listEl()?.nativeElement;
@@ -27464,47 +27871,23 @@ class MenuComponent {
         if (next >= 0)
             items[next].focus({ preventScroll: true });
     }
-    onDocumentClick(event) {
-        if (!this.open())
-            return;
-        const target = event.target;
-        if (this.triggerEl?.contains(target))
-            return;
-        if (this.listEl()?.nativeElement.contains(target))
-            return;
-        this.close();
-    }
     onEscape() {
         if (!this.open())
             return;
         this.close(true);
     }
-    onViewportChange() {
-        if (!this.open() || !this.triggerEl)
-            return;
-        this.triggerRect.set(this.triggerEl.getBoundingClientRect());
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", 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:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [ariaLabel]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{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: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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]=\"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"] }]
+            args: [{ selector: 'ea-menu', imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [ariaLabel]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{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']]
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
-            }], onViewportChange: [{
-                type: HostListener,
-                args: ['window:resize']
-            }, {
-                type: HostListener,
-                args: ['window:scroll']
             }] } });
 
 /**
@@ -27583,97 +27966,440 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
 
 /**
- * Page navigation control with previous/next buttons, numbered page jumps,
- * an optional page-size selector, and a range label. Exposes `page` and
- * `pageSize` as two-way `model()` bindings and emits a single `changed`
- * event whenever either changes.
+ * 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` and
+ * otherwise falls back to the active locale's translation.
  */
-class PaginatorComponent {
+class TagComponent {
     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 */ []));
-    showRangeLabel = input(true, ...(ngDevMode ? [{ debugName: "showRangeLabel" }] : /* istanbul ignore next */ []));
-    align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    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 */ []));
-    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
-    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-    /** Fires when the user changes either the current page or the page size. */
-    changed = output();
-    totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    rangeStart = computed(() => this.totalItems() === 0 ? 0 : (this.page() - 1) * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
-    rangeEnd = computed(() => Math.min(this.page() * this.pageSize(), this.totalItems()), ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
-    canGoPrev = computed(() => this.page() > 1, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
-    canGoNext = computed(() => this.page() < this.totalPages(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
-    visiblePages = computed(() => {
-        const total = this.totalPages();
-        const current = this.page();
-        const pages = [];
-        if (total <= 7) {
-            for (let i = 1; i <= total; i++)
-                pages.push(i);
-            return pages;
-        }
-        pages.push(1);
-        if (current > 3) {
-            pages.push('ellipsis');
-        }
-        const start = Math.max(2, current - 1);
-        const end = Math.min(total - 1, current + 1);
-        for (let i = start; i <= end; i++) {
-            pages.push(i);
-        }
-        if (current < total - 2) {
-            pages.push('ellipsis');
-        }
-        pages.push(total);
-        return pages;
-    }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
-    /** Navigates to the given page, clamped into the valid range. */
-    goToPage(page) {
-        if (this.disabled())
-            return;
-        const clamped = Math.max(1, Math.min(page, this.totalPages()));
-        if (clamped === this.page())
-            return;
-        this.page.set(clamped);
-        this.changed.emit({ page: clamped, pageSize: this.pageSize() });
-    }
-    /** Navigates to the previous page if one exists. */
-    prevPage() {
-        if (this.canGoPrev())
-            this.goToPage(this.page() - 1);
-    }
-    /** Navigates to the next page if one exists. */
-    nextPage() {
-        if (this.canGoNext())
-            this.goToPage(this.page() + 1);
-    }
-    onPageSizeChange(event) {
-        if (this.disabled())
-            return;
-        const newSize = Number(event.target.value);
-        this.pageSize.set(newSize);
-        this.page.set(1);
-        this.changed.emit({ page: 1, pageSize: newSize });
+    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,
+        'ea-tag--disabled': this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onRemove(event) {
+        event.stopPropagation();
+        this.removed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TagComponent, 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  [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"] }] } });
+            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"] }] } });
 
 /**
- * Linear progress indicator supporting both determinate (driven by `value`
- * and `max`) and indeterminate modes. Optionally renders an inline label
- * and/or the current percentage.
+ * Multi-select dropdown. Renders selections as removable `<ea-tag>` chips
+ * inside the trigger, opens a popover containing an optional search input,
+ * a tri-state "Select all" toggle, and a list of `<ea-checkbox>` options.
+ * The wire value is a `readonly string[]` of selected option values, ordered
+ * to match the input `options` array. Closes on outside click / scroll, and
+ * integrates with Angular forms via `ControlValueAccessor`.
  */
-class ProgressBarComponent {
+class MultiSelectComponent {
+    triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+    searchEl = viewChild('searchEl', ...(ngDevMode ? [{ debugName: "searchEl" }] : /* istanbul ignore next */ []));
     i18n = inject(EagamiI18nService);
-    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    // ─── Inputs ───────────────────────────────────────────────────────────
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* 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 */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
+    /** Toggle the search input at the top of the popover. */
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Toggle the "Select all" row at the top of the option list. */
+    selectAll = input(true, ...(ngDevMode ? [{ debugName: "selectAll" }] : /* istanbul ignore next */ []));
+    /** Max number of chips shown inside the trigger; the rest collapse into a "+N more" pill. `0` removes the cap. */
+    maxVisibleChips = input(3, ...(ngDevMode ? [{ debugName: "maxVisibleChips" }] : /* istanbul ignore next */ []));
+    id = input(`ea-multi-select-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Selected option values, in the original options order. */
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new value whenever the selection changes. */
+    changed = output();
+    // ─── State ────────────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    /** Index into `filteredOptions()` for keyboard navigation. `-1` when none focused. */
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    // ─── Computed ─────────────────────────────────────────────────────────
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    /** Set-backed lookup for `selectedSet().has(value)`. */
+    selectedSet = computed(() => new Set(this.value()), ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    /** Options matching the current search term (case-insensitive substring on label). */
+    filteredOptions = computed(() => {
+        const term = this.searchTerm().trim().toLowerCase();
+        const opts = this.options();
+        if (!term)
+            return opts;
+        return opts.filter(o => o.label.toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    /** Currently selected options, ordered to match the input `options`. */
+    selectedOptions = computed(() => {
+        const set = this.selectedSet();
+        return this.options().filter(o => set.has(o.value));
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.value().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Chips visible inside the trigger, capped by `maxVisibleChips`. */
+    visibleChips = computed(() => {
+        const sel = this.selectedOptions();
+        const cap = this.maxVisibleChips();
+        return cap <= 0 || sel.length <= cap ? sel : sel.slice(0, cap);
+    }, ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+    /** Count behind the "+N more" pill, or `0` when all chips fit. */
+    hiddenChipCount = computed(() => {
+        const sel = this.selectedOptions();
+        const cap = this.maxVisibleChips();
+        return cap <= 0 || sel.length <= cap ? 0 : sel.length - cap;
+    }, ...(ngDevMode ? [{ debugName: "hiddenChipCount" }] : /* istanbul ignore next */ []));
+    /** Tri-state of the Select-all checkbox over the **currently filtered** list. */
+    selectAllState = computed(() => {
+        const filtered = this.filteredOptions().filter(o => !o.disabled);
+        if (filtered.length === 0)
+            return 'none';
+        const set = this.selectedSet();
+        let count = 0;
+        for (const o of filtered)
+            if (set.has(o.value))
+                count++;
+        if (count === 0)
+            return 'none';
+        if (count === filtered.length)
+            return 'all';
+        return 'some';
+    }, ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().multiSelect.placeholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    resolvedSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.i18n.messages().multiSelect.searchPlaceholder, ...(ngDevMode ? [{ debugName: "resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => ({
+        [`ea-multi-select__trigger--${this.size()}`]: true,
+        'ea-multi-select__trigger--error': this.hasError(),
+        'ea-multi-select__trigger--open': this.isOpen(),
+        'ea-multi-select__trigger--disabled': this.isDisabled(),
+        'ea-multi-select__trigger--placeholder': !this.hasValue(),
+    }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    // ─── ControlValueAccessor ─────────────────────────────────────────────
+    writeValue(val) {
+        this.value.set(val ?? []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    // ─── Handlers ─────────────────────────────────────────────────────────
+    toggle() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const opening = !this.isOpen();
+        this.isOpen.set(opening);
+        if (opening)
+            this.focusSearchWhenReady();
+        else
+            this.resetEditState();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.resetEditState();
+    }
+    /** Called by `<ea-popover>` when the user clicks outside or scrolls. */
+    onPopoverCloseRequested() {
+        this.close();
+        this.onTouched();
+    }
+    /** Toggle one option's membership in the selection. */
+    toggleOption(opt) {
+        if (this.isDisabled() || this.readonly() || opt.disabled)
+            return;
+        const set = new Set(this.value());
+        if (set.has(opt.value))
+            set.delete(opt.value);
+        else
+            set.add(opt.value);
+        this.commit(this.orderedValues(set));
+    }
+    /**
+     * Remove a single chip from the trigger. `<ea-tag>` already stops the
+     * click from bubbling to the trigger's `(click)`, so no event handling
+     * is needed here.
+     */
+    removeChip(opt) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.commit(this.value().filter(v => v !== opt.value));
+    }
+    /** Clear every selection via the trigger × button. */
+    clear(event) {
+        event.stopPropagation();
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.commit([]);
+    }
+    /**
+     * Toggle the Select-all checkbox. If any filtered option is unselected, the
+     * action selects all filtered. Otherwise, the action removes every filtered
+     * value from the selection. Disabled options are skipped either way.
+     */
+    toggleSelectAll() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const filteredValues = this.filteredOptions()
+            .filter(o => !o.disabled)
+            .map(o => o.value);
+        const set = new Set(this.value());
+        if (this.selectAllState() === 'all') {
+            for (const v of filteredValues)
+                set.delete(v);
+        }
+        else {
+            for (const v of filteredValues)
+                set.add(v);
+        }
+        this.commit(this.orderedValues(set));
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        this.searchTerm.set(target.value);
+        this.focusedIndex.set(-1);
+    }
+    handleTriggerKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!this.isOpen()) {
+                this.isOpen.set(true);
+                this.focusSearchWhenReady();
+            }
+        }
+        else if (event.key === 'Escape' && this.isOpen()) {
+            event.preventDefault();
+            this.close();
+            this.triggerEl()?.nativeElement.focus();
+        }
+        else if (event.key === 'Backspace' && this.hasValue() && !this.isOpen()) {
+            // Quick-remove the last chip when the trigger is focused and no popover.
+            event.preventDefault();
+            this.commit(this.value().slice(0, -1));
+        }
+    }
+    /**
+     * Keyboard navigation inside the popover. Bound to both the search input
+     * and each option row; Space passes through to the search input naturally
+     * so users can type spaces in their query.
+     */
+    handlePopoverKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const opts = this.filteredOptions();
+        const onSearchInput = event.target === this.searchEl()?.nativeElement;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const next = Math.min(opts.length - 1, this.focusedIndex() + 1);
+            this.focusedIndex.set(next);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const next = Math.max(0, this.focusedIndex() - 1);
+            this.focusedIndex.set(next);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.focusedIndex.set(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            this.focusedIndex.set(opts.length - 1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const idx = this.focusedIndex();
+            if (idx >= 0 && idx < opts.length)
+                this.toggleOption(opts[idx]);
+        }
+        else if (event.key === ' ' && !onSearchInput) {
+            // Toggle on Space only when an option row has focus; the search input
+            // needs Space for typing.
+            event.preventDefault();
+            const idx = this.focusedIndex();
+            if (idx >= 0 && idx < opts.length)
+                this.toggleOption(opts[idx]);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            this.triggerEl()?.nativeElement.focus();
+        }
+    }
+    // ─── Internals ────────────────────────────────────────────────────────
+    focusSearchWhenReady() {
+        afterNextRender(() => this.searchEl()?.nativeElement.focus(), {
+            injector: this.injector,
+        });
+    }
+    /** Reorder a value-set against the input `options` array. */
+    orderedValues(set) {
+        return this.options()
+            .filter(o => set.has(o.value))
+            .map(o => o.value);
+    }
+    resetEditState() {
+        this.searchTerm.set('');
+        this.focusedIndex.set(-1);
+    }
+    commit(next) {
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
+        this.changed.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MultiSelectComponent, isStandalone: true, selector: "ea-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n  @if (label()) {\n    <label\n      class=\"ea-multi-select-field__label\"\n      [for]=\"id()\"\n      [class.ea-multi-select-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-multi-select\">\n    <div class=\"ea-multi-select__trigger-wrapper\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                size=\"sm\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-multi-select__popover\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-multi-select-field__message ea-multi-select-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-multi-select-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-multi-select-field__message ea-multi-select-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select-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-multi-select-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-multi-select-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-multi-select-field__message--hint{color:var(--color-text-secondary)}.ea-multi-select-field__message--error{color:var(--color-error-default)}.ea-multi-select-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-multi-select,.ea-multi-select__trigger-wrapper{position:relative}.ea-multi-select__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-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--sm{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-multi-select__trigger--md{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-multi-select__trigger--lg{padding:var(--space-2) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:absolute;top:50%;right:var(--space-7);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);cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-multi-select__clear-icon{width:.875em;height:.875em}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) 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-multi-select__option--focused{background-color:var(--color-bg-muted)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-bg-muted)}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AlertCircleIconComponent,
+                        CheckboxComponent,
+                        ChevronDownIconComponent,
+                        NgClass,
+                        PopoverComponent,
+                        SearchIconComponent,
+                        TagComponent,
+                        XIconComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ea-multi-select-field\">\n  @if (label()) {\n    <label\n      class=\"ea-multi-select-field__label\"\n      [for]=\"id()\"\n      [class.ea-multi-select-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-multi-select\">\n    <div class=\"ea-multi-select__trigger-wrapper\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                size=\"sm\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-multi-select__popover\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-multi-select-field__message ea-multi-select-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-multi-select-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-multi-select-field__message ea-multi-select-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select-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-multi-select-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-multi-select-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-multi-select-field__message--hint{color:var(--color-text-secondary)}.ea-multi-select-field__message--error{color:var(--color-error-default)}.ea-multi-select-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-multi-select,.ea-multi-select__trigger-wrapper{position:relative}.ea-multi-select__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-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--sm{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-multi-select__trigger--md{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-multi-select__trigger--lg{padding:var(--space-2) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:absolute;top:50%;right:var(--space-7);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);cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-multi-select__clear-icon{width:.875em;height:.875em}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) 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-multi-select__option--focused{background-color:var(--color-bg-muted)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-bg-muted)}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
+        }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", 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"] }] } });
+
+/**
+ * Page navigation control with previous/next buttons, numbered page jumps,
+ * an optional page-size selector, and a range label. Exposes `page` and
+ * `pageSize` as two-way `model()` bindings and emits a single `changed`
+ * 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 */ []));
+    showRangeLabel = input(true, ...(ngDevMode ? [{ debugName: "showRangeLabel" }] : /* istanbul ignore next */ []));
+    align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Fires when the user changes either the current page or the page size. */
+    changed = output();
+    totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    rangeStart = computed(() => this.totalItems() === 0 ? 0 : (this.page() - 1) * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => Math.min(this.page() * this.pageSize(), this.totalItems()), ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    canGoPrev = computed(() => this.page() > 1, ...(ngDevMode ? [{ debugName: "canGoPrev" }] : /* istanbul ignore next */ []));
+    canGoNext = computed(() => this.page() < this.totalPages(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+    visiblePages = computed(() => {
+        const total = this.totalPages();
+        const current = this.page();
+        const pages = [];
+        if (total <= 7) {
+            for (let i = 1; i <= total; i++)
+                pages.push(i);
+            return pages;
+        }
+        pages.push(1);
+        if (current > 3) {
+            pages.push('ellipsis');
+        }
+        const start = Math.max(2, current - 1);
+        const end = Math.min(total - 1, current + 1);
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (current < total - 2) {
+            pages.push('ellipsis');
+        }
+        pages.push(total);
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
+    /** Navigates to the given page, clamped into the valid range. */
+    goToPage(page) {
+        if (this.disabled())
+            return;
+        const clamped = Math.max(1, Math.min(page, this.totalPages()));
+        if (clamped === this.page())
+            return;
+        this.page.set(clamped);
+        this.changed.emit({ page: clamped, pageSize: this.pageSize() });
+    }
+    /** Navigates to the previous page if one exists. */
+    prevPage() {
+        if (this.canGoPrev())
+            this.goToPage(this.page() - 1);
+    }
+    /** Navigates to the next page if one exists. */
+    nextPage() {
+        if (this.canGoNext())
+            this.goToPage(this.page() + 1);
+    }
+    onPageSizeChange(event) {
+        if (this.disabled())
+            return;
+        const newSize = Number(event.target.value);
+        this.pageSize.set(newSize);
+        this.page.set(1);
+        this.changed.emit({ page: 1, pageSize: newSize });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", 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  [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"] }] } });
+
+/**
+ * Linear progress indicator supporting both determinate (driven by `value`
+ * and `max`) and indeterminate modes. Optionally renders an inline label
+ * 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 */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -27808,6 +28534,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\">\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+/**
+ * Two-thumb extension of `<ea-slider>`. Drives a `[low, high]` numeric range
+ * with pointer drag (the closer thumb to the pointer responds) and full
+ * keyboard navigation per thumb (arrows / PageUp / PageDown / Home / End).
+ * Tab moves between thumbs. Configurable `min`, `max`, `step`, optional value
+ * display, and integrates with Angular forms via `ControlValueAccessor`.
+ *
+ * Overlap rule: a thumb cannot cross past the other; once it reaches the
+ * opposite thumb's position, it clamps to that boundary. Drag-induced
+ * overlap (where the user yanks the low thumb past the high) is resolved by
+ * keeping the moving thumb on its side and the other thumb pinned.
+ */
+class RangeSliderComponent {
+    trackEl = viewChild('trackEl', ...(ngDevMode ? [{ debugName: "trackEl" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    showMinMaxLabels = input(false, ...(ngDevMode ? [{ debugName: "showMinMaxLabels" }] : /* istanbul ignore next */ []));
+    formatValue = input(value => `${value}`, ...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the low (start) thumb. Falls back to the field label when omitted. */
+    ariaLabelLow = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelLow" } : /* istanbul ignore next */ {}), alias: 'aria-label-low' });
+    /** Accessible label for the high (end) thumb. Falls back to the field label when omitted. */
+    ariaLabelHigh = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelHigh" } : /* istanbul ignore next */ {}), alias: 'aria-label-high' });
+    id = input(`ea-range-slider-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    value = model([0, 100], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new `[low, high]` tuple whenever either thumb moves. */
+    changed = output();
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Clamped, ordered `[low, high]` tuple — `low <= high`, both within `[min, max]`. */
+    clampedValue = computed(() => {
+        const [a, b] = this.value();
+        const min = this.min();
+        const max = this.max();
+        const lo = Math.min(max, Math.max(min, Math.min(a, b)));
+        const hi = Math.min(max, Math.max(min, Math.max(a, b)));
+        return [lo, hi];
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    lowPercent = computed(() => this.toPercent(this.clampedValue()[0]), ...(ngDevMode ? [{ debugName: "lowPercent" }] : /* istanbul ignore next */ []));
+    highPercent = computed(() => this.toPercent(this.clampedValue()[1]), ...(ngDevMode ? [{ debugName: "highPercent" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    hostClasses = computed(() => ({
+        [`ea-range-slider--${this.size()}`]: true,
+        'ea-range-slider--error': this.hasError(),
+        'ea-range-slider--disabled': this.isDisabled(),
+        'ea-range-slider--dragging': this.dragging() !== null,
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // ─── ControlValueAccessor ───────────────────────────────────────────────
+    writeValue(val) {
+        if (Array.isArray(val) && val.length === 2) {
+            const [a, b] = val;
+            const safeA = typeof a === 'number' && !isNaN(a) ? a : this.min();
+            const safeB = typeof b === 'number' && !isNaN(b) ? b : this.max();
+            this.value.set([safeA, safeB]);
+        }
+        else {
+            this.value.set([this.min(), this.max()]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    // ─── Keyboard ───────────────────────────────────────────────────────────
+    handleKeydown(event, thumb) {
+        if (this.isDisabled())
+            return;
+        const [lo, hi] = this.clampedValue();
+        const current = thumb === 'low' ? lo : hi;
+        const step = this.step();
+        const bigStep = Math.max(step * 10, (this.max() - this.min()) / 10);
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = current + step;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = current - step;
+                break;
+            case 'PageUp':
+                next = current + bigStep;
+                break;
+            case 'PageDown':
+                next = current - bigStep;
+                break;
+            case 'Home':
+                next = this.min();
+                break;
+            case 'End':
+                next = this.max();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.commitThumb(thumb, next);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    // ─── Pointer ────────────────────────────────────────────────────────────
+    handleTrackPointerDown(event) {
+        if (this.isDisabled())
+            return;
+        const track = this.trackEl()?.nativeElement;
+        if (!track)
+            return;
+        // Pick whichever thumb is closer to the pointer's track-relative ratio,
+        // breaking ties toward the low thumb. Then begin dragging that thumb.
+        const raw = this.pointerToValue(event, track);
+        const [lo, hi] = this.clampedValue();
+        const target = Math.abs(raw - lo) <= Math.abs(raw - hi) ? 'low' : 'high';
+        event.target.setPointerCapture?.(event.pointerId);
+        this.dragging.set(target);
+        this.commitThumb(target, raw);
+    }
+    handleTrackPointerMove(event) {
+        const active = this.dragging();
+        if (!active || this.isDisabled())
+            return;
+        const track = this.trackEl()?.nativeElement;
+        if (!track)
+            return;
+        this.commitThumb(active, this.pointerToValue(event, track));
+    }
+    handleTrackPointerUp(event) {
+        if (!this.dragging())
+            return;
+        event.target.releasePointerCapture?.(event.pointerId);
+        this.dragging.set(null);
+        this.onTouched();
+    }
+    // ─── Internals ──────────────────────────────────────────────────────────
+    toPercent(value) {
+        const range = this.max() - this.min();
+        if (range <= 0)
+            return 0;
+        return ((value - this.min()) / range) * 100;
+    }
+    pointerToValue(event, track) {
+        const rect = track.getBoundingClientRect();
+        const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        return this.min() + ratio * (this.max() - this.min());
+    }
+    /** Snap to step, clamp to `[min, max]`, then constrain by the opposite thumb. */
+    commitThumb(thumb, raw) {
+        const step = this.step();
+        const min = this.min();
+        const max = this.max();
+        const snapped = Math.round((raw - min) / step) * step + min;
+        const clamped = Math.min(max, Math.max(min, snapped));
+        const rounded = Number(clamped.toFixed(10));
+        const [lo, hi] = this.clampedValue();
+        let nextLo = lo;
+        let nextHi = hi;
+        if (thumb === 'low') {
+            nextLo = Math.min(rounded, hi);
+        }
+        else {
+            nextHi = Math.max(rounded, lo);
+        }
+        if (nextLo === lo && nextHi === hi)
+            return;
+        const next = [nextLo, nextHi];
+        this.value.set(next);
+        this.onChange(next);
+        this.changed.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: RangeSliderComponent, isStandalone: true, selector: "ea-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelLow: { classPropertyName: "ariaLabelLow", publicName: "aria-label-low", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelHigh: { classPropertyName: "ariaLabelHigh", publicName: "aria-label-high", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeSliderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-range-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-range-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-range-slider-field__message ea-range-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-range-slider-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-range-slider-field__message ea-range-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);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-range-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-range-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider-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-range-slider-field__message--hint{color:inherit}.ea-range-slider-field__message--error{color:var(--color-error-default)}.ea-range-slider-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--sm .ea-range-slider .ea-range-slider__track{height:.25rem}.ea-range-slider--sm .ea-range-slider .ea-range-slider__thumb{width:.875rem;height:.875rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__track{height:.375rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__thumb{width:1.125rem;height:1.125rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__track{height:.5rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__thumb{width:1.375rem;height:1.375rem}.ea-range-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-range-slider', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AlertCircleIconComponent, NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeSliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-range-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-range-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-range-slider-field__message ea-range-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-range-slider-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-range-slider-field__message ea-range-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);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-range-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-range-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider-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-range-slider-field__message--hint{color:inherit}.ea-range-slider-field__message--error{color:var(--color-error-default)}.ea-range-slider-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--sm .ea-range-slider .ea-range-slider__track{height:.25rem}.ea-range-slider--sm .ea-range-slider .ea-range-slider__thumb{width:.875rem;height:.875rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__track{height:.375rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__thumb{width:1.125rem;height:1.125rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__track{height:.5rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__thumb{width:1.375rem;height:1.375rem}.ea-range-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+        }], 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 }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-low", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-high", 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"] }] } });
+
 /**
  * Compact toggle button group for picking one of a small set of options
  * (e.g. List/Grid/Kanban or Light/Dark). Implements `radiogroup` semantics
@@ -28106,26 +29039,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], 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"`. The `label` input
- * overrides the accessible name announced to assistive technology; when unset
- * it falls back to the active locale's translation.
+ * 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(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.13", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.13", 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\">{{ 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 }] }] } });
+
+/**
+ * Multi-step navigation paired with content panels. Child `<ea-step>`
+ * components register themselves automatically and the active panel is
+ * shown based on the `activeStep` (zero-based index) two-way binding.
+ *
+ * In `linear` mode, steps cannot be navigated to until all earlier
+ * non-optional steps are marked `completed`. Otherwise any step can be
+ * clicked. ArrowLeft / ArrowRight walk through reachable steps; Home/End
+ * jump to the extremes.
+ */
+class StepperComponent {
+    i18n = inject(EagamiI18nService);
+    registeredSteps = signal([], ...(ngDevMode ? [{ debugName: "registeredSteps" }] : /* istanbul ignore next */ []));
+    // ─── Inputs ───────────────────────────────────────────────────────────
+    activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    id = input(`ea-stepper-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // ─── Outputs ──────────────────────────────────────────────────────────
+    /** Fires with the new active step index when the user navigates. */
+    changed = output();
+    // ─── Computed ─────────────────────────────────────────────────────────
+    hostClasses = computed(() => ({
+        [`ea-stepper--${this.size()}`]: true,
+        'ea-stepper--disabled': this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // ─── Registration ─────────────────────────────────────────────────────
+    registerStep(step) {
+        this.registeredSteps.update(steps => [...steps, step]);
+    }
+    unregisterStep(step) {
+        this.registeredSteps.update(steps => steps.filter(s => s !== step));
+    }
+    /** Returns the index of a given step, or `-1` if it isn't registered. */
+    indexOf(step) {
+        return this.registeredSteps().indexOf(step);
+    }
+    // ─── Navigation ───────────────────────────────────────────────────────
+    /**
+     * True when the user can navigate directly to the step at `index`. In
+     * non-linear mode this is true for any non-disabled step; in linear mode,
+     * every non-optional earlier step must also be marked `completed`.
+     */
+    canNavigateTo(index) {
+        if (this.disabled())
+            return false;
+        const steps = this.registeredSteps();
+        if (index < 0 || index >= steps.length)
+            return false;
+        if (steps[index].disabled())
+            return false;
+        if (!this.linear())
+            return true;
+        if (index <= this.activeStep())
+            return true;
+        for (let i = 0; i < index; i++) {
+            const step = steps[i];
+            if (!step.completed() && !step.optional())
+                return false;
+        }
+        return true;
+    }
+    /** Activate the step at `index` if reachable. */
+    selectStep(index) {
+        if (!this.canNavigateTo(index))
+            return;
+        if (index === this.activeStep())
+            return;
+        this.activeStep.set(index);
+        this.changed.emit(index);
+    }
+    handleKeydown(event) {
+        if (this.disabled())
+            return;
+        const steps = this.registeredSteps();
+        if (steps.length === 0)
+            return;
+        let nextIndex = -1;
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            nextIndex = this.nextReachable(this.activeStep(), 1);
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            nextIndex = this.nextReachable(this.activeStep(), -1);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            nextIndex = this.firstReachable();
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            nextIndex = this.lastReachable();
+        }
+        if (nextIndex >= 0 && nextIndex !== this.activeStep()) {
+            this.selectStep(nextIndex);
+            const buttons = event.currentTarget.querySelectorAll('.ea-stepper__button:not([disabled])');
+            // Match the focused button to the new index (visit order matches DOM order).
+            const reachableIndices = this.registeredSteps()
+                .map((_, i) => i)
+                .filter(i => this.canNavigateTo(i));
+            const buttonIdx = reachableIndices.indexOf(nextIndex);
+            buttons[buttonIdx]?.focus();
+        }
+    }
+    // ─── Internals ────────────────────────────────────────────────────────
+    nextReachable(from, direction) {
+        const steps = this.registeredSteps();
+        for (let i = from + direction; i >= 0 && i < steps.length; i += direction) {
+            if (this.canNavigateTo(i))
+                return i;
+        }
+        return -1;
+    }
+    firstReachable() {
+        const steps = this.registeredSteps();
+        for (let i = 0; i < steps.length; i++) {
+            if (this.canNavigateTo(i))
+                return i;
+        }
+        return -1;
+    }
+    lastReachable() {
+        const steps = this.registeredSteps();
+        for (let i = steps.length - 1; i >= 0; i--) {
+            if (this.canNavigateTo(i))
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <ol\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <li class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </li>\n    }\n  </ol>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper__list{display:flex;align-items:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--sm .ea-stepper__circle{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-stepper--sm .ea-stepper__label{font-size:var(--font-size-xs)}.ea-stepper--lg .ea-stepper__circle{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-stepper--lg .ea-stepper__label{font-size:var(--font-size-md)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <ol\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <li class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </li>\n    }\n  </ol>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper__list{display:flex;align-items:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--sm .ea-stepper__circle{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-stepper--sm .ea-stepper__label{font-size:var(--font-size-xs)}.ea-stepper--lg .ea-stepper__circle{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-stepper--lg .ea-stepper__label{font-size:var(--font-size-md)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
+        }], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * Single step within an `<ea-stepper>`. Registers itself with the parent on
+ * init, exposes its `label` / `completed` / `optional` flags, and shows its
+ * projected content when active.
  */
-class SpinnerComponent {
-    i18n = inject(EagamiI18nService);
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* 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.13", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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 });
+class StepComponent {
+    stepper = inject(StepperComponent);
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    id = input(`ea-step-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.stepper.indexOf(this) === this.stepper.activeStep(), ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.stepper.registerStep(this);
+    }
+    ngOnDestroy() {
+        this.stepper.unregisterStep(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: StepComponent, isStandalone: true, selector: "ea-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "isActive() ? null : \"none\"" } }, ngImport: i0, template: `
+    @if (isActive()) {
+      <div
+        class="ea-step__panel"
+        role="tabpanel"
+        [id]="id() + '-panel'"
+        [attr.aria-labelledby]="id() + '-tab'"
+        tabindex="0">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StepComponent, 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\">{{ 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 }] }] } });
+            args: [{
+                    selector: 'ea-step',
+                    host: { '[style.display]': 'isActive() ? null : "none"' },
+                    template: `
+    @if (isActive()) {
+      <div
+        class="ea-step__panel"
+        role="tabpanel"
+        [id]="id() + '-panel'"
+        [attr.aria-labelledby]="id() + '-tab'"
+        tabindex="0">
+        <ng-content />
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * On/off toggle styled as a sliding switch. Backed by a visually hidden
@@ -28312,40 +29438,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
-/**
- * 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` 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(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,
-        'ea-tag--disabled': this.disabled(),
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    onRemove(event) {
-        event.stopPropagation();
-        this.removed.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", 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]=\"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"] }] } });
-
 /**
  * Multiline text field that mirrors the `ea-input` API. Supports configurable
  * `rows`, `resize` direction, and `maxlength`, and integrates with Angular
@@ -28422,7 +29514,7 @@ class TextareaComponent {
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-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-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-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-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height: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-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-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-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-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-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{min-height:calc(1.5em + var(--space-2) * 2);padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{min-height:calc(1.5em + var(--space-3) * 2);padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{min-height:calc(1.5em + var(--space-4) * 2);padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height: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-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -28432,9 +29524,503 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-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-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-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-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height: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-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-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-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-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-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{min-height:calc(1.5em + var(--space-2) * 2);padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{min-height:calc(1.5em + var(--space-3) * 2);padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{min-height:calc(1.5em + var(--space-4) * 2);padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height: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-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { 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 }] }], 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", 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"] }] } });
 
+/**
+ * Pops a stepper UI for selecting an `HH:MM[:SS]` time. The wire value is
+ * always a 24-hour string (`"14:30"` or `"14:30:00"`); the `format` input
+ * toggles the trigger's display between 12-hour and 24-hour styles. Supports
+ * configurable steps for minutes and seconds, optional seconds column, and
+ * integrates with Angular forms via `ControlValueAccessor`.
+ *
+ * Keyboard: Tab moves between the hour, minute, (seconds), and AM/PM columns.
+ * Each spinner accepts ArrowUp/ArrowDown to step by 1 (or by the configured
+ * step), PageUp/PageDown for a coarser bump, and digit keys to type a value
+ * directly. After typing two digits (or one digit that already maxes the
+ * unit), focus auto-advances to the next column. Backspace clears the typed
+ * buffer; Escape closes the popover.
+ */
+class TimePickerComponent {
+    triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+    hoursEl = viewChild('hoursEl', ...(ngDevMode ? [{ debugName: "hoursEl" }] : /* istanbul ignore next */ []));
+    minutesEl = viewChild('minutesEl', ...(ngDevMode ? [{ debugName: "minutesEl" }] : /* istanbul ignore next */ []));
+    secondsEl = viewChild('secondsEl', ...(ngDevMode ? [{ debugName: "secondsEl" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    // ─── Inputs ───────────────────────────────────────────────────────────
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
+    /** Display format for the trigger label. Wire value is always 24h. */
+    format = input('24h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    includeSeconds = input(false, ...(ngDevMode ? [{ debugName: "includeSeconds" }] : /* istanbul ignore next */ []));
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    id = input(`ea-time-picker-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** `"HH:MM"` or `"HH:MM:SS"` in 24-hour notation, or `null` when unset. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new value whenever the user changes the time. */
+    changed = output();
+    // ─── State ────────────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Typed-digit buffer for the currently focused column, or `null` when idle. */
+    editBuffer = signal(null, ...(ngDevMode ? [{ debugName: "editBuffer" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Long-press timers for the chevron buttons. Cleared on release/destroy. */
+    holdDelayTimer = null;
+    holdIntervalTimer = null;
+    holdStartedAt = 0;
+    // ─── Computed ─────────────────────────────────────────────────────────
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    /** Parsed `[hh, mm, ss]` from the current value, defaulting to midnight. */
+    parsed = computed(() => {
+        const parsed = parseTime(this.value());
+        return parsed ?? { hours: 0, minutes: 0, seconds: 0 };
+    }, ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
+    /** True when the picker has a non-null value. Drives the clear button + placeholder fallback. */
+    hasValue = computed(() => this.value() !== null, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Hours digit displayed in the popover stepper. Honors the `format` input. */
+    displayHours = computed(() => {
+        const h = this.parsed().hours;
+        if (this.format() === '24h')
+            return h;
+        // 12h: 0 → 12 (midnight as 12 AM), 13–23 → 1–11
+        return h % 12 === 0 ? 12 : h % 12;
+    }, ...(ngDevMode ? [{ debugName: "displayHours" }] : /* istanbul ignore next */ []));
+    /**
+     * Text shown in a column's value cell. Reflects the typed-digit buffer when
+     * the user is mid-edit on that column; otherwise renders the committed
+     * value. Hours pad to two digits in 24h mode only (so 9 AM still reads as
+     * "9", but 09:00 in 24h reads as "09").
+     */
+    hoursText = computed(() => {
+        const buf = this.editBuffer();
+        if (buf && buf.unit === 'hours')
+            return buf.digits;
+        const h = this.displayHours();
+        return this.format() === '24h' ? pad2(h) : String(h);
+    }, ...(ngDevMode ? [{ debugName: "hoursText" }] : /* istanbul ignore next */ []));
+    minutesText = computed(() => {
+        const buf = this.editBuffer();
+        if (buf && buf.unit === 'minutes')
+            return buf.digits;
+        return pad2(this.parsed().minutes);
+    }, ...(ngDevMode ? [{ debugName: "minutesText" }] : /* istanbul ignore next */ []));
+    secondsText = computed(() => {
+        const buf = this.editBuffer();
+        if (buf && buf.unit === 'seconds')
+            return buf.digits;
+        return pad2(this.parsed().seconds);
+    }, ...(ngDevMode ? [{ debugName: "secondsText" }] : /* istanbul ignore next */ []));
+    /** `'AM' | 'PM'` for 12h mode; `null` in 24h. */
+    period = computed(() => {
+        if (this.format() === '24h')
+            return null;
+        return this.parsed().hours < 12 ? 'AM' : 'PM';
+    }, ...(ngDevMode ? [{ debugName: "period" }] : /* istanbul ignore next */ []));
+    /** Localized text shown on the trigger. Falls back to placeholder when no value. */
+    displayValue = computed(() => {
+        if (!this.hasValue())
+            return null;
+        const { hours, minutes, seconds } = this.parsed();
+        const m = pad2(minutes);
+        const s = this.includeSeconds() ? `:${pad2(seconds)}` : '';
+        if (this.format() === '24h') {
+            return `${pad2(hours)}:${m}${s}`;
+        }
+        const display = hours % 12 === 0 ? 12 : hours % 12;
+        const period = hours < 12
+            ? this.i18n.messages().timePicker.amLabel
+            : this.i18n.messages().timePicker.pmLabel;
+        return `${display}:${m}${s} ${period}`;
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().timePicker.placeholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => ({
+        [`ea-time-picker__trigger--${this.size()}`]: true,
+        'ea-time-picker__trigger--error': this.hasError(),
+        'ea-time-picker__trigger--open': this.isOpen(),
+        'ea-time-picker__trigger--disabled': this.isDisabled(),
+        'ea-time-picker__trigger--placeholder': !this.hasValue(),
+    }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    // ─── ControlValueAccessor ─────────────────────────────────────────────
+    writeValue(val) {
+        this.value.set(val ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    constructor() {
+        this.destroyRef.onDestroy(() => this.stopHold());
+    }
+    // ─── Handlers ─────────────────────────────────────────────────────────
+    toggle() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const opening = !this.isOpen();
+        this.isOpen.set(opening);
+        if (opening)
+            this.focusHoursWhenReady();
+    }
+    /**
+     * Push focus into the hours input once the popover surface has been
+     * rendered. `afterNextRender` guarantees the DOM has been updated (and the
+     * surface is no longer `display: none`) before we call `.focus()`.
+     */
+    focusHoursWhenReady() {
+        afterNextRender(() => {
+            const el = this.hoursEl()?.nativeElement;
+            el?.focus();
+            el?.select();
+        }, { injector: this.injector });
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    /** Called by `<ea-popover>` when the user clicks outside or scrolls. */
+    onPopoverCloseRequested() {
+        this.close();
+        this.onTouched();
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.value.set(null);
+        this.onChange(null);
+        this.onTouched();
+        this.changed.emit(null);
+    }
+    handleTriggerKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!this.isOpen()) {
+                this.isOpen.set(true);
+                this.focusHoursWhenReady();
+            }
+        }
+        else if (event.key === 'Escape' && this.isOpen()) {
+            event.preventDefault();
+            this.close();
+            this.triggerEl()?.nativeElement.focus();
+        }
+    }
+    /** Stepper button or keyboard arrow nudges one column up or down. */
+    step(unit, direction) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const { hours, minutes, seconds } = this.parsed();
+        const next = nextTime({ hours, minutes, seconds }, unit, direction, this.minuteStep(), this.secondStep());
+        this.commit(next);
+    }
+    /**
+     * Begin a long-press repeat on a chevron button. Fires once immediately,
+     * then after a `HOLD_INITIAL_DELAY` pause repeats at `HOLD_INTERVAL_MS`,
+     * accelerating to `HOLD_FAST_INTERVAL_MS` after `HOLD_ACCELERATE_AFTER_MS`
+     * of continuous holding. Pointer up / leave / cancel stops the repeat.
+     */
+    startHold(unit, direction, event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        event.preventDefault();
+        this.stopHold();
+        this.step(unit, direction);
+        this.holdStartedAt = performance.now();
+        this.holdDelayTimer = setTimeout(() => {
+            this.holdIntervalTimer = setInterval(() => {
+                this.step(unit, direction);
+                const elapsed = performance.now() - this.holdStartedAt;
+                if (elapsed > HOLD_ACCELERATE_AFTER_MS && this.holdIntervalTimer !== null) {
+                    clearInterval(this.holdIntervalTimer);
+                    this.holdIntervalTimer = setInterval(() => this.step(unit, direction), HOLD_FAST_INTERVAL_MS);
+                }
+            }, HOLD_INTERVAL_MS);
+        }, HOLD_INITIAL_DELAY);
+    }
+    /** End any in-flight long-press repeat. Idempotent. */
+    stopHold() {
+        if (this.holdDelayTimer !== null) {
+            clearTimeout(this.holdDelayTimer);
+            this.holdDelayTimer = null;
+        }
+        if (this.holdIntervalTimer !== null) {
+            clearInterval(this.holdIntervalTimer);
+            this.holdIntervalTimer = null;
+        }
+    }
+    /** Switches the AM/PM period in 12h mode by toggling the 12-hour offset. */
+    togglePeriod() {
+        if (this.isDisabled() || this.readonly() || this.format() === '24h')
+            return;
+        const { hours, minutes, seconds } = this.parsed();
+        const flipped = (hours + 12) % 24;
+        this.commit({ hours: flipped, minutes, seconds });
+    }
+    handlePopoverKeydown(event, unit) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        // Digits, Backspace, and Delete pass through to the native `<input>`.
+        // The `(input)` handler picks them up via `onSpinnerInput`.
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.flushBuffer();
+            this.step(unit, 1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.flushBuffer();
+            this.step(unit, -1);
+        }
+        else if (event.key === 'PageUp') {
+            event.preventDefault();
+            this.flushBuffer();
+            // Coarse step: 5× the configured step (or 10 for hours).
+            const coarse = unit === 'hours' ? 10 : 5;
+            for (let i = 0; i < coarse; i++)
+                this.step(unit, 1);
+        }
+        else if (event.key === 'PageDown') {
+            event.preventDefault();
+            this.flushBuffer();
+            const coarse = unit === 'hours' ? 10 : 5;
+            for (let i = 0; i < coarse; i++)
+                this.step(unit, -1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            this.flushBuffer();
+            this.close();
+            this.triggerEl()?.nativeElement.focus();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.editBuffer.set(null);
+            this.close();
+            this.triggerEl()?.nativeElement.focus();
+        }
+        // Tab is handled by the browser; (blur) on the leaving input flushes.
+    }
+    /** Select-all on focus so the first keystroke replaces the current value. */
+    onSpinnerFocus(event) {
+        const el = event.currentTarget;
+        // afterNextRender-ish: wait one tick so iOS / Safari accept the select().
+        queueMicrotask(() => el.select());
+    }
+    /**
+     * Native `(input)` event: the typed value is already in `el.value`. Strip
+     * non-digits, update the buffer (which drives the displayed text), and
+     * commit + auto-advance once the column is full or a third digit would
+     * overflow.
+     */
+    onSpinnerInput(unit, event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const el = event.currentTarget;
+        const raw = el.value;
+        const digits = raw.replace(/\D/g, '').slice(0, 2);
+        if (digits !== raw)
+            el.value = digits;
+        this.editBuffer.set({ unit, digits });
+        if (digits.length === 2) {
+            // Two digits committed — advance.
+            this.commitDigits(unit, digits);
+            this.advanceFocus(unit);
+            return;
+        }
+        if (digits.length === 1 && this.cannotExtend(unit, digits)) {
+            // A single digit already saturates the unit (e.g. `9` in minutes once
+            // a second `0`–`5` would be required to stay ≤ 59 — but 9 + 0 = 90 > 59).
+            // Commit and advance.
+            this.commitDigits(unit, digits);
+            this.advanceFocus(unit);
+        }
+    }
+    /** Commits the current buffer if any. Wired to each input's `(blur)`. */
+    onSpinnerBlur() {
+        this.flushBuffer();
+    }
+    // ─── Typing internals ─────────────────────────────────────────────────
+    /** True when no digit `0`–`9` can validly extend the current buffer. */
+    cannotExtend(unit, digits) {
+        const candidate = parseInt(digits + '0', 10);
+        return candidate > this.maxFor(unit);
+    }
+    /** Commits any pending buffer. Called on blur, on arrow keys, on Tab. */
+    flushBuffer() {
+        const buf = this.editBuffer();
+        if (!buf || buf.digits.length === 0) {
+            this.editBuffer.set(null);
+            return;
+        }
+        this.commitDigits(buf.unit, buf.digits);
+    }
+    /** Writes the buffered digits into the value and clears the buffer. */
+    commitDigits(unit, digits) {
+        const raw = parseInt(digits, 10);
+        if (isNaN(raw)) {
+            this.editBuffer.set(null);
+            return;
+        }
+        const max = this.maxFor(unit);
+        const clamped = Math.min(max, Math.max(this.minFor(unit), raw));
+        const { hours, minutes, seconds } = this.parsed();
+        let next;
+        if (unit === 'hours') {
+            next = { hours: this.hoursFromTyped(clamped), minutes, seconds };
+        }
+        else if (unit === 'minutes') {
+            next = { hours, minutes: clamped, seconds };
+        }
+        else {
+            next = { hours, minutes, seconds: clamped };
+        }
+        this.editBuffer.set(null);
+        this.commit(next);
+    }
+    /**
+     * Map a typed hours value back to 24h. In 24h mode the typed value is the
+     * hour. In 12h mode the typed value is interpreted in the current period
+     * (AM → 12 maps to 0, others stay; PM → 12 stays, others add 12).
+     */
+    hoursFromTyped(typed) {
+        if (this.format() === '24h')
+            return typed;
+        const isPm = this.period() === 'PM';
+        if (typed === 12)
+            return isPm ? 12 : 0;
+        return isPm ? typed + 12 : typed;
+    }
+    minFor(unit) {
+        if (unit !== 'hours')
+            return 0;
+        return this.format() === '24h' ? 0 : 1;
+    }
+    maxFor(unit) {
+        if (unit === 'hours')
+            return this.format() === '24h' ? 23 : 12;
+        return 59;
+    }
+    /** Move focus to the next unit column, looping back to hours at the end. */
+    advanceFocus(unit) {
+        const next = this.nextUnit(unit);
+        const el = next === 'hours'
+            ? this.hoursEl()?.nativeElement
+            : next === 'minutes'
+                ? this.minutesEl()?.nativeElement
+                : this.secondsEl()?.nativeElement;
+        el?.focus();
+    }
+    nextUnit(unit) {
+        if (unit === 'hours')
+            return 'minutes';
+        if (unit === 'minutes')
+            return this.includeSeconds() ? 'seconds' : 'hours';
+        return 'hours';
+    }
+    // ─── Internals ────────────────────────────────────────────────────────
+    commit(time) {
+        const str = formatTime(time, this.includeSeconds());
+        if (str === this.value())
+            return;
+        this.value.set(str);
+        this.onChange(str);
+        this.changed.emit(str);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TimePickerComponent, isStandalone: true, selector: "ea-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, includeSeconds: { classPropertyName: "includeSeconds", publicName: "includeSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TimePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-time-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-time-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-time-picker\">\n    <div class=\"ea-time-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-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-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <!-- Hours column -->\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <!-- Minutes column -->\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <!-- Seconds column (optional) -->\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        <!-- AM/PM toggle (12h only) -->\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-time-picker-field__message ea-time-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-time-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-time-picker-field__message ea-time-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-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-time-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-time-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-time-picker-field__message--hint{color:var(--color-text-secondary)}.ea-time-picker-field__message--error{color:var(--color-error-default)}.ea-time-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-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-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-time-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-time-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-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-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);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-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;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-time-picker__step:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:.875em;height:.875em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AlertCircleIconComponent,
+                        ChevronDownIconComponent,
+                        ChevronUpIconComponent,
+                        ClockIconComponent,
+                        NgClass,
+                        PopoverComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ea-time-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-time-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-time-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-time-picker\">\n    <div class=\"ea-time-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-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-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <!-- Hours column -->\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <!-- Minutes column -->\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <!-- Seconds column (optional) -->\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        <!-- AM/PM toggle (12h only) -->\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-time-picker-field__message ea-time-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-time-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-time-picker-field__message ea-time-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-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-time-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-time-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-time-picker-field__message--hint{color:var(--color-text-secondary)}.ea-time-picker-field__message--error{color:var(--color-error-default)}.ea-time-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-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-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-time-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-time-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-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-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);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-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;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-time-picker__step:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:.875em;height:.875em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }], secondsEl: [{ type: i0.ViewChild, args: ['secondsEl', { 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 }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], includeSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", 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"] }] } });
+// ─── Constants ──────────────────────────────────────────────────────────
+/** Delay before a held chevron button starts repeating, in ms. */
+const HOLD_INITIAL_DELAY = 400;
+/** Repeat interval while a chevron button is held, in ms. */
+const HOLD_INTERVAL_MS = 90;
+/** After this many ms of continuous hold, the repeat accelerates. */
+const HOLD_ACCELERATE_AFTER_MS = 1500;
+/** Repeat interval once the long-press has accelerated, in ms. */
+const HOLD_FAST_INTERVAL_MS = 35;
+// ─── Pure helpers ───────────────────────────────────────────────────────
+/** Pad a 0–59 unit to two digits. */
+function pad2(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/** Parse `"HH:MM"` / `"HH:MM:SS"`; returns `null` for any malformed input. */
+function parseTime(input) {
+    if (!input)
+        return null;
+    const match = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(input.trim());
+    if (!match)
+        return null;
+    const hours = clamp(parseInt(match[1], 10), 0, 23);
+    const minutes = clamp(parseInt(match[2], 10), 0, 59);
+    const seconds = match[3] !== undefined ? clamp(parseInt(match[3], 10), 0, 59) : 0;
+    if (isNaN(hours) || isNaN(minutes) || isNaN(seconds))
+        return null;
+    return { hours, minutes, seconds };
+}
+function clamp(n, lo, hi) {
+    return Math.min(hi, Math.max(lo, n));
+}
+function formatTime(time, includeSeconds) {
+    const base = `${pad2(time.hours)}:${pad2(time.minutes)}`;
+    return includeSeconds ? `${base}:${pad2(time.seconds)}` : base;
+}
+/** Wrap-around step for a unit. Hours wrap at 24, minutes/seconds at 60. */
+function nextTime(current, unit, direction, minuteStep, secondStep) {
+    const { hours, minutes, seconds } = current;
+    if (unit === 'hours') {
+        const nextHours = (hours + direction + 24) % 24;
+        return { hours: nextHours, minutes, seconds };
+    }
+    if (unit === 'minutes') {
+        const nextMinutes = (minutes + direction * minuteStep + 60) % 60;
+        return { hours, minutes: nextMinutes, seconds };
+    }
+    const nextSeconds = (seconds + direction * secondStep + 60) % 60;
+    return { hours, minutes, seconds: nextSeconds };
+}
+
 /**
  * Application-wide notification service. Use the convenience methods
  * (`success`, `error`, `warning`, `info`) to push a toast, or call
@@ -28519,5 +30105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, ApertureIconComponent, AppleIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkIconComponent, BottleIconComponent, BoxIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClipboardIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_MESSAGES, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, Figma2IconComponent, FigmaIconComponent, FileIconComponent, FileMinusIconComponent, FilePlusIconComponent, FileTextIconComponent, FilmIconComponent, FilterIconComponent, FlagIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderPlusIconComponent, FramerIconComponent, FrownIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KubernetesIconComponent, LampIconComponent, LayersIconComponent, LayoutIconComponent, LifeBuoyIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NotionIconComponent, NpmIconComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PencilIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PieChartIconComponent, PlayCircleIconComponent, PlayIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SoccerBallIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StopCircleIconComponent, StripeIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TargetIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, Trash2IconComponent, TrashIconComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, WatchIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, el, en, esES, frFR, frenchSpacing, iconDisplayName, pl, provideEagamiUi };
+export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkIconComponent, BottleIconComponent, BoxIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClipboardIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_MESSAGES, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, Figma2IconComponent, FigmaIconComponent, FileIconComponent, FileMinusIconComponent, FilePlusIconComponent, FileTextIconComponent, FilmIconComponent, FilterIconComponent, FlagIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderPlusIconComponent, FramerIconComponent, FrownIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KubernetesIconComponent, LampIconComponent, LayersIconComponent, LayoutIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NotionIconComponent, NpmIconComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PieChartIconComponent, PlayCircleIconComponent, PlayIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SoccerBallIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TargetIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TimePickerComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, Trash2IconComponent, TrashIconComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, WatchIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, computePopoverPosition, el, en, esES, frFR, frenchSpacing, iconDisplayName, pl, provideEagamiUi };
 //# sourceMappingURL=eagami-ui.mjs.map