@eagami/ui 1.4.0 → 1.5.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, contentChild, viewChildren, DestroyRef } 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 { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -60,6 +60,16 @@ const el = {
         groupLabel: length => `Κωδικός επαλήθευσης, ${length} ψηφία`,
         digitLabel: (index, length) => `Ψηφίο ${index} από ${length}`,
     },
+    colorPicker: {
+        placeholder: 'Επιλέξτε χρώμα…',
+        clear: 'Εκκαθάριση χρώματος',
+        hue: 'Απόχρωση',
+        saturationAndValue: 'Κορεσμός και τιμή',
+        alpha: 'Άλφα',
+        eyedropper: 'Επιλογή από οθόνη',
+        presets: 'Προεπιλογές',
+        toggleFormat: 'Αλλαγή μορφής εισαγωγής',
+    },
     dataTable: {
         noData: 'Δεν υπάρχουν διαθέσιμα δεδομένα',
     },
@@ -139,6 +149,16 @@ const en = {
         groupLabel: length => `Verification code, ${length} digits`,
         digitLabel: (index, length) => `Digit ${index} of ${length}`,
     },
+    colorPicker: {
+        placeholder: 'Pick a color…',
+        clear: 'Clear color',
+        hue: 'Hue',
+        saturationAndValue: 'Saturation and value',
+        alpha: 'Alpha',
+        eyedropper: 'Pick from screen',
+        presets: 'Presets',
+        toggleFormat: 'Switch input format',
+    },
     dataTable: {
         noData: 'No data available',
     },
@@ -218,6 +238,16 @@ const esES = {
         groupLabel: length => `Código de verificación, ${length} dígitos`,
         digitLabel: (index, length) => `Dígito ${index} de ${length}`,
     },
+    colorPicker: {
+        placeholder: 'Elegir un color…',
+        clear: 'Borrar color',
+        hue: 'Matiz',
+        saturationAndValue: 'Saturación y valor',
+        alpha: 'Alfa',
+        eyedropper: 'Elegir de la pantalla',
+        presets: 'Preajustes',
+        toggleFormat: 'Cambiar formato de entrada',
+    },
     dataTable: {
         noData: 'No hay datos disponibles',
     },
@@ -297,6 +327,16 @@ const frFR = {
         groupLabel: length => `Code de vérification, ${length} chiffres`,
         digitLabel: (index, length) => `Chiffre ${index} sur ${length}`,
     },
+    colorPicker: {
+        placeholder: 'Choisir une couleur…',
+        clear: 'Effacer la couleur',
+        hue: 'Teinte',
+        saturationAndValue: 'Saturation et valeur',
+        alpha: 'Alpha',
+        eyedropper: "Prélever à l'écran",
+        presets: 'Présélections',
+        toggleFormat: 'Changer le format de saisie',
+    },
     dataTable: {
         noData: 'Aucune donnée disponible',
     },
@@ -376,6 +416,16 @@ const pl = {
         groupLabel: length => `Kod weryfikacyjny, ${length} cyfr`,
         digitLabel: (index, length) => `Cyfra ${index} z ${length}`,
     },
+    colorPicker: {
+        placeholder: 'Wybierz kolor…',
+        clear: 'Wyczyść kolor',
+        hue: 'Barwa',
+        saturationAndValue: 'Nasycenie i wartość',
+        alpha: 'Alfa',
+        eyedropper: 'Pobierz z ekranu',
+        presets: 'Predefiniowane',
+        toggleFormat: 'Zmień format wprowadzania',
+    },
     dataTable: {
         noData: 'Brak dostępnych danych',
     },
@@ -1148,17 +1198,17 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-autocomplete__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}.ea-autocomplete__message-icon{flex-shrink:0;width:.875em;height:.875em}\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: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-autocomplete', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-autocomplete', imports: [AlertCircleIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"] }]
+                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-autocomplete__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}.ea-autocomplete__message-icon{flex-shrink:0;width:.875em;height:.875em}\n"] }]
         }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2753,19 +2803,869 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox{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-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__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-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-checkbox-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-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-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-checkbox{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-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__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-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\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: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-checkbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-checkbox', imports: [AlertCircleIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox{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-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__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-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"] }]
+                    ], template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-checkbox-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-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-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-checkbox{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-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__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-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", 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 }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", 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 }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+class DropletIconComponent extends IconComponentBase {
+    static slug = 'droplet';
+    static category = 'feather';
+    static tags = [
+        'droplet',
+        'water',
+        'drop',
+        'liquid',
+        'rain',
+        'goutte',
+        'eau',
+        'gota',
+        'agua',
+        'σταγόνα',
+        'νερό',
+        'kropla',
+        'woda',
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropletIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DropletIconComponent, isStandalone: true, selector: "ea-icon-droplet", 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.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropletIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-droplet',
+                    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.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+    </svg>
+  `,
+                }]
+        }] });
+
+const DEFAULT_PRESETS = [
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#eab308',
+    '#84cc16',
+    '#22c55e',
+    '#10b981',
+    '#14b8a6',
+    '#06b6d4',
+    '#0ea5e9',
+    '#3b82f6',
+    '#6366f1',
+    '#8b5cf6',
+    '#a855f7',
+    '#d946ef',
+    '#ec4899',
+    '#f43f5e',
+    '#000000',
+    '#6b7280',
+    '#ffffff',
+];
+/**
+ * Popover color picker with a saturation/value gradient area, hue slider,
+ * optional alpha slider, hex + RGB inputs, a configurable preset palette,
+ * and an eyedropper (Chromium browsers). Integrates with Angular forms via
+ * `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 */ []));
+    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 */ []));
+    /** Whether to show the alpha slider. When `false` the emitted value always has alpha = 1. */
+    showAlpha = input(true, ...(ngDevMode ? [{ debugName: "showAlpha" }] : /* istanbul ignore next */ []));
+    /** Output format for emitted values. */
+    format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Preset swatches shown at the bottom of the popover. Pass an empty array to hide. */
+    presets = input(DEFAULT_PRESETS, ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    id = input(`ea-color-picker-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new color string whenever the selection changes. */
+    changed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    hue = signal(0, ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
+    sat = signal(0, ...(ngDevMode ? [{ debugName: "sat" }] : /* istanbul ignore next */ []));
+    val = signal(0, ...(ngDevMode ? [{ debugName: "val" }] : /* istanbul ignore next */ []));
+    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
+    /** Tracks the active drag target so pointermove can route correctly. */
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /** Which input row is visible (hex string or RGB channels). Toggles via the
+     * format button. Independent of the `format` input, which only controls the
+     * emitted value. */
+    inputMode = signal('hex', ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /** What the hex input shows. Kept separate from the canonical hex so the user
+     * 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 = () => { };
+    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 */ []));
+    rgb = computed(() => hsvToRgb(this.hue(), this.sat(), this.val()), ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+    displayColor = computed(() => {
+        const { r, g, b } = this.rgb();
+        return `rgba(${r}, ${g}, ${b}, ${this.alpha()})`;
+    }, ...(ngDevMode ? [{ debugName: "displayColor" }] : /* istanbul ignore next */ []));
+    /** Opaque version of the current color — used as the hue/SV reference. */
+    opaqueColor = computed(() => {
+        const { r, g, b } = this.rgb();
+        return `rgb(${r}, ${g}, ${b})`;
+    }, ...(ngDevMode ? [{ debugName: "opaqueColor" }] : /* istanbul ignore next */ []));
+    hueColor = computed(() => {
+        const { r, g, b } = hsvToRgb(this.hue(), 1, 1);
+        return `rgb(${r}, ${g}, ${b})`;
+    }, ...(ngDevMode ? [{ debugName: "hueColor" }] : /* istanbul ignore next */ []));
+    hexDisplay = computed(() => rgbaToHex(this.rgb(), this.alpha(), this.showAlpha()), ...(ngDevMode ? [{ debugName: "hexDisplay" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        if (this.value() === null)
+            return '';
+        return formatColor(this.rgb(), this.alpha(), this.format(), this.showAlpha());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.messages().colorPicker.placeholder, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => ({
+        [`ea-color-picker__trigger--${this.size()}`]: true,
+        'ea-color-picker__trigger--error': this.hasError(),
+        '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(() => {
+        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) {
+        if (!val) {
+            this.value.set(null);
+            this.hue.set(0);
+            this.sat.set(0);
+            this.val.set(0);
+            this.alpha.set(1);
+            this.hexInputValue.set('');
+            return;
+        }
+        const parsed = parseColor(val);
+        if (!parsed)
+            return;
+        this.applyRgba(parsed.r, parsed.g, parsed.b, parsed.a, false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    // ─── Open / close ─────────────────────────────────────────────────────
+    toggle() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    open() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.isOpen.set(true);
+        // `preventScroll: true` — see the matching note in `ea-menu` for why:
+        // focusing inside a `position: fixed` popover nested under a sticky/scrolled
+        // ancestor otherwise nudges the document scroll position toward the trigger.
+        afterNextRender(() => this.svAreaEl()?.nativeElement.focus({ preventScroll: true }), {
+            injector: this.injector,
+        });
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.dragging.set(null);
+        this.onTouched();
+    }
+    focus() {
+        this.triggerEl()?.nativeElement.focus();
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.value.set(null);
+        this.hue.set(0);
+        this.sat.set(0);
+        this.val.set(0);
+        this.alpha.set(1);
+        this.hexInputValue.set('');
+        this.onChange(null);
+        this.onTouched();
+        this.changed.emit(null);
+    }
+    // ─── Position helpers exposed to the template ─────────────────────────
+    svPointerLeft = computed(() => `${this.sat() * 100}%`, ...(ngDevMode ? [{ debugName: "svPointerLeft" }] : /* istanbul ignore next */ []));
+    svPointerTop = computed(() => `${(1 - this.val()) * 100}%`, ...(ngDevMode ? [{ debugName: "svPointerTop" }] : /* istanbul ignore next */ []));
+    huePointerLeft = computed(() => `${(this.hue() / 360) * 100}%`, ...(ngDevMode ? [{ debugName: "huePointerLeft" }] : /* istanbul ignore next */ []));
+    alphaPointerLeft = computed(() => `${this.alpha() * 100}%`, ...(ngDevMode ? [{ debugName: "alphaPointerLeft" }] : /* istanbul ignore next */ []));
+    hueRounded = computed(() => Math.round(this.hue()), ...(ngDevMode ? [{ debugName: "hueRounded" }] : /* istanbul ignore next */ []));
+    alphaPercentRounded = computed(() => Math.round(this.alpha() * 100), ...(ngDevMode ? [{ debugName: "alphaPercentRounded" }] : /* istanbul ignore next */ []));
+    // ─── SV area interaction ──────────────────────────────────────────────
+    onSvPointerDown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const target = event.target;
+        target.setPointerCapture?.(event.pointerId);
+        this.dragging.set('sv');
+        this.updateSvFromPointer(event);
+    }
+    onSvPointerMove(event) {
+        if (this.dragging() !== 'sv')
+            return;
+        this.updateSvFromPointer(event);
+    }
+    onSvPointerUp(event) {
+        if (this.dragging() !== 'sv')
+            return;
+        event.target.releasePointerCapture?.(event.pointerId);
+        this.dragging.set(null);
+    }
+    onSvKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 0.1 : 0.01;
+        let s = this.sat();
+        let v = this.val();
+        switch (event.key) {
+            case 'ArrowLeft':
+                s -= step;
+                break;
+            case 'ArrowRight':
+                s += step;
+                break;
+            case 'ArrowUp':
+                v += step;
+                break;
+            case 'ArrowDown':
+                v -= step;
+                break;
+            case 'Home':
+                s = 0;
+                break;
+            case 'End':
+                s = 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.applyHsv(this.hue(), clamp01(s), clamp01(v));
+    }
+    updateSvFromPointer(event) {
+        const area = this.svAreaEl()?.nativeElement;
+        if (!area)
+            return;
+        const rect = area.getBoundingClientRect();
+        const x = clamp01((event.clientX - rect.left) / rect.width);
+        const y = clamp01((event.clientY - rect.top) / rect.height);
+        this.applyHsv(this.hue(), x, 1 - y);
+    }
+    // ─── Hue strip interaction ────────────────────────────────────────────
+    onHuePointerDown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        event.target.setPointerCapture?.(event.pointerId);
+        this.dragging.set('hue');
+        this.updateHueFromPointer(event);
+    }
+    onHuePointerMove(event) {
+        if (this.dragging() !== 'hue')
+            return;
+        this.updateHueFromPointer(event);
+    }
+    onHuePointerUp(event) {
+        if (this.dragging() !== 'hue')
+            return;
+        event.target.releasePointerCapture?.(event.pointerId);
+        this.dragging.set(null);
+    }
+    onHueKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 10 : 1;
+        let h = this.hue();
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                h -= step;
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                h += step;
+                break;
+            case 'Home':
+                h = 0;
+                break;
+            case 'End':
+                h = 360;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.applyHsv(((h % 360) + 360) % 360, this.sat(), this.val());
+    }
+    updateHueFromPointer(event) {
+        const track = this.hueTrackEl()?.nativeElement;
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const ratio = clamp01((event.clientX - rect.left) / rect.width);
+        this.applyHsv(ratio * 360, this.sat(), this.val());
+    }
+    // ─── Alpha strip interaction ──────────────────────────────────────────
+    onAlphaPointerDown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        event.target.setPointerCapture?.(event.pointerId);
+        this.dragging.set('alpha');
+        this.updateAlphaFromPointer(event);
+    }
+    onAlphaPointerMove(event) {
+        if (this.dragging() !== 'alpha')
+            return;
+        this.updateAlphaFromPointer(event);
+    }
+    onAlphaPointerUp(event) {
+        if (this.dragging() !== 'alpha')
+            return;
+        event.target.releasePointerCapture?.(event.pointerId);
+        this.dragging.set(null);
+    }
+    onAlphaKeydown(event) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 0.1 : 0.01;
+        let a = this.alpha();
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                a -= step;
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                a += step;
+                break;
+            case 'Home':
+                a = 0;
+                break;
+            case 'End':
+                a = 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.alpha.set(clamp01(a));
+        this.commit();
+    }
+    updateAlphaFromPointer(event) {
+        const track = this.alphaTrackEl()?.nativeElement;
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const ratio = clamp01((event.clientX - rect.left) / rect.width);
+        this.alpha.set(ratio);
+        this.commit();
+    }
+    // ─── Hex / RGB text inputs ────────────────────────────────────────────
+    /**
+     * Mirrors the user's literal text into `hexInputValue` and (if the text
+     * parses) applies the new color silently — without rewriting the input.
+     * Without `refreshHex: false`, typing `#123` would parse, commit, and then
+     * snap the input back to `#112233` mid-keystroke, fighting the user's caret.
+     * Canonicalization happens only on blur via {@link onHexBlur}.
+     */
+    onHexInput(event) {
+        const raw = event.target.value;
+        this.hexInputValue.set(raw);
+        const parsed = parseColor(raw.startsWith('#') ? raw : `#${raw}`);
+        if (parsed) {
+            this.applyRgba(parsed.r, parsed.g, parsed.b, parsed.a, true, false);
+        }
+    }
+    onHexBlur() {
+        // Reset the partial text to the canonical hex of the current color.
+        this.hexInputValue.set(this.hexDisplay());
+        this.onTouched();
+    }
+    onRgbInput(channel, event) {
+        const input = event.target;
+        // Truncate to 3 digits — matches `maxlength` on the input. type="text"
+        // doesn't enforce maxlength on programmatic value sets so we re-clamp
+        // here defensively.
+        if (input.value.length > 3)
+            input.value = input.value.slice(0, 3);
+        const raw = parseInt(input.value, 10);
+        if (Number.isNaN(raw))
+            return;
+        const v = Math.max(0, Math.min(255, raw));
+        const next = { ...this.rgb(), [channel]: v };
+        this.applyRgba(next.r, next.g, next.b, this.alpha(), true);
+    }
+    /** Cycles the input row between hex string and RGB channels. */
+    cycleInputMode() {
+        this.inputMode.update(m => (m === 'hex' ? 'rgb' : 'hex'));
+    }
+    onAlphaInput(event) {
+        const input = event.target;
+        if (input.value.length > 3)
+            input.value = input.value.slice(0, 3);
+        const raw = parseInt(input.value, 10);
+        if (Number.isNaN(raw))
+            return;
+        const next = Math.max(0, Math.min(100, raw)) / 100;
+        this.alpha.set(next);
+        this.commit();
+    }
+    // ─── Eyedropper ───────────────────────────────────────────────────────
+    async pickFromScreen() {
+        if (this.isDisabled() || this.readonly() || !this.hasEyeDropper())
+            return;
+        const Ctor = window.EyeDropper;
+        const dropper = new Ctor();
+        try {
+            const result = await dropper.open();
+            const parsed = parseColor(result.sRGBHex);
+            if (parsed)
+                this.applyRgba(parsed.r, parsed.g, parsed.b, this.alpha(), true);
+        }
+        catch {
+            // User cancelled — no-op.
+        }
+    }
+    // ─── Preset swatches ──────────────────────────────────────────────────
+    selectPreset(hex) {
+        if (this.isDisabled() || this.readonly())
+            return;
+        const parsed = parseColor(hex);
+        if (!parsed)
+            return;
+        this.applyRgba(parsed.r, parsed.g, parsed.b, parsed.a, true);
+    }
+    // ─── Trigger keyboard ─────────────────────────────────────────────────
+    onTriggerKeydown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.open();
+                break;
+        }
+    }
+    onPopoverKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            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 });
+        }
+    }
+    // ─── Internal: applying state and committing ──────────────────────────
+    applyHsv(h, s, v) {
+        this.hue.set(h);
+        this.sat.set(s);
+        this.val.set(v);
+        this.commit();
+    }
+    applyRgba(r, g, b, a, commit, refreshHex = true) {
+        const hsv = rgbToHsv(r, g, b);
+        // Preserve current hue when the new color is achromatic (sat = 0).
+        this.hue.set(hsv.s === 0 ? this.hue() : hsv.h);
+        this.sat.set(hsv.s);
+        this.val.set(hsv.v);
+        this.alpha.set(a);
+        if (commit)
+            this.commit(refreshHex);
+        else if (refreshHex)
+            this.refreshHexInput();
+    }
+    commit(refreshHex = true) {
+        const out = formatColor(this.rgb(), this.alpha(), this.format(), this.showAlpha());
+        if (refreshHex)
+            this.refreshHexInput();
+        if (out === this.value())
+            return;
+        this.value.set(out);
+        this.onChange(out);
+        this.changed.emit(out);
+    }
+    refreshHexInput() {
+        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: [
+            {
+                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 });
+}
+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: [
+                        {
+                            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']]
+            }] } });
+// ─── Pure color helpers (module-private) ──────────────────────────────────
+function clamp01(n) {
+    return Math.min(1, Math.max(0, n));
+}
+function hsvToRgb(h, s, v) {
+    const c = v * s;
+    const hh = (h / 60) % 6;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    const [r, g, b] = sectorToRgb(hh, c, x);
+    const m = v - c;
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+}
+function sectorToRgb(hh, c, x) {
+    if (hh < 1)
+        return [c, x, 0];
+    if (hh < 2)
+        return [x, c, 0];
+    if (hh < 3)
+        return [0, c, x];
+    if (hh < 4)
+        return [0, x, c];
+    if (hh < 5)
+        return [x, 0, c];
+    return [c, 0, x];
+}
+function rgbToHsv(r, g, b) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === rn)
+            h = ((gn - bn) / d) % 6;
+        else if (max === gn)
+            h = (bn - rn) / d + 2;
+        else
+            h = (rn - gn) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const s = max === 0 ? 0 : d / max;
+    return { h, s, v: max };
+}
+function rgbToHsl({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = d / (1 - Math.abs(2 * l - 1));
+        if (max === rn)
+            h = ((gn - bn) / d) % 6;
+        else if (max === gn)
+            h = (bn - rn) / d + 2;
+        else
+            h = (rn - gn) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s, l };
+}
+function rgbaToHex({ r, g, b }, a, includeAlpha) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    const base = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    if (!includeAlpha || a >= 1)
+        return base;
+    return `${base}${toHex(Math.round(a * 255))}`;
+}
+function formatColor(rgb, alpha, format, includeAlpha) {
+    switch (format) {
+        case 'rgb':
+            return includeAlpha && alpha < 1
+                ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${Number(alpha.toFixed(2))})`
+                : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        case 'hsl': {
+            const { h, s, l } = rgbToHsl(rgb);
+            const hh = Math.round(h);
+            const ss = Math.round(s * 100);
+            const ll = Math.round(l * 100);
+            return includeAlpha && alpha < 1
+                ? `hsla(${hh}, ${ss}%, ${ll}%, ${Number(alpha.toFixed(2))})`
+                : `hsl(${hh}, ${ss}%, ${ll}%)`;
+        }
+        case 'hex':
+        default:
+            return rgbaToHex(rgb, alpha, includeAlpha);
+    }
+}
+function parseColor(input) {
+    const value = input.trim();
+    if (!value)
+        return null;
+    const hex = parseHex(value);
+    if (hex)
+        return hex;
+    const rgb = parseRgbFunc(value);
+    if (rgb)
+        return rgb;
+    const hsl = parseHslFunc(value);
+    if (hsl)
+        return hsl;
+    return parseViaCanvas(value);
+}
+function parseHex(value) {
+    const m = /^#?([0-9a-f]{3,8})$/i.exec(value);
+    if (!m)
+        return null;
+    let h = m[1];
+    if (h.length === 3 || h.length === 4) {
+        h = h
+            .split('')
+            .map(c => c + c)
+            .join('');
+    }
+    if (h.length !== 6 && h.length !== 8)
+        return null;
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+}
+function parseRgbFunc(value) {
+    const m = /^rgba?\(([^)]+)\)$/i.exec(value);
+    if (!m)
+        return null;
+    const parts = m[1].split(/[,\s/]+/).filter(Boolean);
+    if (parts.length < 3)
+        return null;
+    const r = clampByte(parseFloat(parts[0]));
+    const g = clampByte(parseFloat(parts[1]));
+    const b = clampByte(parseFloat(parts[2]));
+    const a = parts[3] !== undefined ? clampAlpha(parts[3]) : 1;
+    if ([r, g, b].some(Number.isNaN))
+        return null;
+    return { r, g, b, a };
+}
+function parseHslFunc(value) {
+    const m = /^hsla?\(([^)]+)\)$/i.exec(value);
+    if (!m)
+        return null;
+    const parts = m[1].split(/[,\s/]+/).filter(Boolean);
+    if (parts.length < 3)
+        return null;
+    const h = parseFloat(parts[0]);
+    const s = parseFloat(parts[1]) / 100;
+    const l = parseFloat(parts[2]) / 100;
+    const a = parts[3] !== undefined ? clampAlpha(parts[3]) : 1;
+    if ([h, s, l].some(Number.isNaN))
+        return null;
+    const rgb = hslToRgb(h, s, l);
+    return { ...rgb, a };
+}
+function parseViaCanvas(value) {
+    if (typeof document === 'undefined')
+        return null;
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    ctx.fillStyle = '#000';
+    const before = ctx.fillStyle;
+    ctx.fillStyle = value;
+    if (ctx.fillStyle === before &&
+        value.toLowerCase() !== '#000000' &&
+        value.toLowerCase() !== 'black') {
+        return null;
+    }
+    ctx.fillRect(0, 0, 1, 1);
+    const data = ctx.getImageData(0, 0, 1, 1).data;
+    return { r: data[0], g: data[1], b: data[2], a: data[3] / 255 };
+}
+function hslToRgb(h, s, l) {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const hh = (h / 60) % 6;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    const [r, g, b] = sectorToRgb(hh, c, x);
+    const m = l - c / 2;
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+}
+function clampByte(n) {
+    return Math.max(0, Math.min(255, Math.round(n)));
+}
+function clampAlpha(value) {
+    if (value.endsWith('%'))
+        return clamp01(parseFloat(value) / 100);
+    return clamp01(parseFloat(value));
+}
+
 class ArrowDownIconComponent extends IconComponentBase {
     static slug = 'arrow-down';
     static category = 'feather';
@@ -3196,17 +4096,17 @@ class CodeInputComponent {
                 useExisting: forwardRef(() => CodeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-code-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{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-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-code-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-code-input', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CodeInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-code-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{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-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { digitEls: [{ type: i0.ViewChildren, args: ['digitEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
 class CalendarIconComponent extends IconComponentBase {
@@ -3964,19 +4864,24 @@ class DropdownComponent {
             menu.style.left = `${rect.left}px`;
             menu.style.minWidth = `${rect.width}px`;
         });
-        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);
-        });
+        // 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) {
@@ -4090,17 +4995,17 @@ class DropdownComponent {
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [id]=\"id() + '-listbox'\">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "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 }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dropdown', imports: [ChevronDownIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-dropdown', imports: [AlertCircleIconComponent, ChevronDownIconComponent, NgClass], 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      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [id]=\"id() + '-listbox'\">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <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']]
@@ -11011,62 +11916,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
 
-class DropletIconComponent extends IconComponentBase {
-    static slug = 'droplet';
-    static category = 'feather';
-    static tags = [
-        'droplet',
-        'water',
-        'drop',
-        'liquid',
-        'rain',
-        'goutte',
-        'eau',
-        'gota',
-        'agua',
-        'σταγόνα',
-        'νερό',
-        'kropla',
-        'woda',
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropletIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DropletIconComponent, isStandalone: true, selector: "ea-icon-droplet", 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.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DropletIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ea-icon-droplet',
-                    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.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-    </svg>
-  `,
-                }]
-        }] });
-
 class Edit2IconComponent extends IconComponentBase {
     static slug = 'edit-2';
     static category = 'feather';
@@ -26374,6 +27223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  */
 class InputComponent {
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
     i18n = inject(EagamiI18nService);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -26416,10 +27266,15 @@ class InputComponent {
         'ea-input-wrapper--disabled': this.isDisabled(),
         'ea-input-wrapper--readonly': this.readonly(),
     }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
-    ngAfterViewInit() {
-        if (this.autofocus()) {
-            setTimeout(() => this.inputEl()?.nativeElement.focus());
-        }
+    constructor() {
+        // `afterNextRender` runs once the input has actually been inserted into
+        // the DOM (and avoids SSR), replacing the older `ngAfterViewInit` +
+        // bare-`setTimeout(0)` dance that relied on the macrotask queue to bridge
+        // the gap between view-init and the element being focusable.
+        afterNextRender(() => {
+            if (this.autofocus())
+                this.inputEl()?.nativeElement.focus();
+        }, { injector: this.injector });
     }
     writeValue(val) {
         this.value.set(val ?? '');
@@ -26474,7 +27329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             multi: true,
                         },
                     ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
-        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 /**
  * Popup action menu attached to any focusable element via the
@@ -26555,7 +27410,7 @@ class MenuComponent {
         this.open.set(false);
         this.closed.emit();
         if (restoreFocus)
-            this.triggerEl?.focus();
+            this.triggerEl?.focus({ preventScroll: true });
     }
     getEnabledItems() {
         const list = this.listEl()?.nativeElement;
@@ -26563,8 +27418,18 @@ class MenuComponent {
             return [];
         return Array.from(list.querySelectorAll('[role="menuitem"]:not([disabled])'));
     }
+    /**
+     * `preventScroll: true` is critical here. The menu list is `position: fixed`
+     * but its DOM ancestor is whatever element hosts the menu (often a sticky
+     * header). When `.focus()` is called without `preventScroll`, Chromium uses
+     * the focused element's DOM-tree position (inside the sticky ancestor) rather
+     * than its rendered fixed position to decide whether to scroll — which on a
+     * scrolled page nudges the document up by a few pixels per open, until the
+     * trigger reaches the top edge. The same guard applies to keyboard navigation
+     * and restoring focus on close.
+     */
     focusFirstItem() {
-        this.getEnabledItems()[0]?.focus();
+        this.getEnabledItems()[0]?.focus({ preventScroll: true });
     }
     onKeydown(event) {
         if (!this.open())
@@ -26597,7 +27462,7 @@ class MenuComponent {
                 break;
         }
         if (next >= 0)
-            items[next].focus();
+            items[next].focus({ preventScroll: true });
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -26895,17 +27760,17 @@ class RadioGroupComponent {
                 useExisting: forwardRef(() => RadioGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-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-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-radio-group-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-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-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-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-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-radio-group', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioGroupComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-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-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
+                    ], template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-radio-group-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-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-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-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-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -27065,17 +27930,17 @@ class SegmentedComponent {
                 useExisting: forwardRef(() => SegmentedComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-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-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-segmented-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-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-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-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-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--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: SegmentedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-segmented', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], providers: [
+            args: [{ selector: 'ea-segmented', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AlertCircleIconComponent, NgClass], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SegmentedComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-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-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-segmented-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-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-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-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-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { buttonEls: [{ type: i0.ViewChildren, args: ['optionEl', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: 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 }] }], 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 }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", 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"] }] } });
 
 /**
@@ -27227,17 +28092,17 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\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.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-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-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-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-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-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-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\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.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-slider-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-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-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-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-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-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-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\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: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-slider', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], providers: [
+            args: [{ selector: 'ea-slider', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AlertCircleIconComponent, NgClass], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\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.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-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-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-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-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-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-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\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.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-slider-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-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-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-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-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-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-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\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 }] }], 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"] }] } });
 
 /**
@@ -27320,17 +28185,17 @@ class SwitchComponent {
                 useExisting: forwardRef(() => SwitchComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch{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)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-switch-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-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-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-switch{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)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: 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: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-switch', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ea-switch', imports: [AlertCircleIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SwitchComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch{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)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
+                    ], template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-switch-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-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-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-switch{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)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
         }], propDecorators: { 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 }] }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -27654,5 +28519,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, 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, 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 };
 //# sourceMappingURL=eagami-ui.mjs.map