@eagami/ui 5.2.2 → 5.4.0

package/fesm2022/eagami-ui.mjs

@@ -245,12 +245,10 @@ function emitFamily(family, scale, roles, light, dark) {
     dark[`${brandPrefix}-default`] = scale[roles.surfaceDark];
     dark[`${brandPrefix}-hover`] = scale[roles.surfaceHoverDark];
     dark[`${brandPrefix}-active`] = scale[roles.surfaceActiveDark];
-    if (family === 'primary') {
-        light['--color-brand-text'] = scale[roles.textLight];
-        dark['--color-brand-text'] = scale[roles.textDark];
-        light['--color-brand-subtle'] = scale[roles.subtleLight];
-        light['--color-brand-muted'] = scale[roles.mutedLight];
-    }
+    light[`${brandPrefix}-text`] = scale[roles.textLight];
+    dark[`${brandPrefix}-text`] = scale[roles.textDark];
+    light[`${brandPrefix}-subtle`] = scale[roles.subtleLight];
+    light[`${brandPrefix}-muted`] = scale[roles.mutedLight];
 }
 function derivePalette(config) {
     const light = {};
@@ -521,6 +519,10 @@ const messages$e = {
         hidePassword: 'إخفاء كلمة المرور',
         clear: 'مسح',
     },
+    numberInput: {
+        increment: 'زيادة',
+        decrement: 'إنقاص',
+    },
     menu: {
         label: 'القائمة',
     },
@@ -723,6 +725,10 @@ const messages$d = {
         hidePassword: 'Passwort verbergen',
         clear: 'Löschen',
     },
+    numberInput: {
+        increment: 'Erhöhen',
+        decrement: 'Verringern',
+    },
     menu: {
         label: 'Menü',
     },
@@ -925,6 +931,10 @@ const messages$c = {
         hidePassword: 'Απόκρυψη κωδικού πρόσβασης',
         clear: 'Καθαρισμός',
     },
+    numberInput: {
+        increment: 'Αύξηση',
+        decrement: 'Μείωση',
+    },
     menu: {
         label: 'Μενού',
     },
@@ -1127,6 +1137,10 @@ const messages$b = {
         hidePassword: 'Hide password',
         clear: 'Clear',
     },
+    numberInput: {
+        increment: 'Increment',
+        decrement: 'Decrement',
+    },
     menu: {
         label: 'Menu',
     },
@@ -1329,6 +1343,10 @@ const messages$a = {
         hidePassword: 'Ocultar contraseña',
         clear: 'Borrar',
     },
+    numberInput: {
+        increment: 'Incrementar',
+        decrement: 'Disminuir',
+    },
     menu: {
         label: 'Menú',
     },
@@ -1531,6 +1549,10 @@ const messages$9 = {
         hidePassword: 'Masquer le mot de passe',
         clear: 'Effacer',
     },
+    numberInput: {
+        increment: 'Augmenter',
+        decrement: 'Diminuer',
+    },
     menu: {
         label: 'Menu',
     },
@@ -1733,6 +1755,10 @@ const messages$8 = {
         hidePassword: 'הסתרת סיסמה',
         clear: 'ניקוי',
     },
+    numberInput: {
+        increment: 'הגדלה',
+        decrement: 'הקטנה',
+    },
     menu: {
         label: 'תפריט',
     },
@@ -1935,6 +1961,10 @@ const messages$7 = {
         hidePassword: 'पासवर्ड छिपाएं',
         clear: 'साफ़ करें',
     },
+    numberInput: {
+        increment: 'बढ़ाएँ',
+        decrement: 'घटाएँ',
+    },
     menu: {
         label: 'मेनू',
     },
@@ -2137,6 +2167,10 @@ const messages$6 = {
         hidePassword: 'Fela lykilorð',
         clear: 'Hreinsa',
     },
+    numberInput: {
+        increment: 'Hækka',
+        decrement: 'Lækka',
+    },
     menu: {
         label: 'Valmynd',
     },
@@ -2339,6 +2373,10 @@ const messages$5 = {
         hidePassword: 'Wachtwoord verbergen',
         clear: 'Wissen',
     },
+    numberInput: {
+        increment: 'Verhogen',
+        decrement: 'Verlagen',
+    },
     menu: {
         label: 'Menu',
     },
@@ -2541,6 +2579,10 @@ const messages$4 = {
         hidePassword: 'Ukryj hasło',
         clear: 'Wyczyść',
     },
+    numberInput: {
+        increment: 'Zwiększ',
+        decrement: 'Zmniejsz',
+    },
     menu: {
         label: 'Menu',
     },
@@ -2743,6 +2785,10 @@ const messages$3 = {
         hidePassword: 'Ocultar senha',
         clear: 'Limpar',
     },
+    numberInput: {
+        increment: 'Aumentar',
+        decrement: 'Diminuir',
+    },
     menu: {
         label: 'Menu',
     },
@@ -2945,6 +2991,10 @@ const messages$2 = {
         hidePassword: 'Скрыть пароль',
         clear: 'Очистить',
     },
+    numberInput: {
+        increment: 'Увеличить',
+        decrement: 'Уменьшить',
+    },
     menu: {
         label: 'Меню',
     },
@@ -3147,6 +3197,10 @@ const messages$1 = {
         hidePassword: 'Приховати пароль',
         clear: 'Очистити',
     },
+    numberInput: {
+        increment: 'Збільшити',
+        decrement: 'Зменшити',
+    },
     menu: {
         label: 'Меню',
     },
@@ -3349,6 +3403,10 @@ const messages = {
         hidePassword: '隐藏密码',
         clear: '清除',
     },
+    numberInput: {
+        increment: '增加',
+        decrement: '减少',
+    },
     menu: {
         label: '菜单',
     },
@@ -6955,6 +7013,8 @@ class ColorPickerComponent {
     errorMessages = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* 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 */ []));
+    /** Whether to show the clear button when a value is set. */
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
     /** Output format. `all` lets the user cycle hex/rgb/hsl in the popover; a specific value locks it. */
     format = input('all', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     /** Preset swatches shown at the bottom of the popover. Pass an empty array to hide. */
@@ -7491,13 +7551,13 @@ class ColorPickerComponent {
         this.hexInputValue.set(this.hexDisplay());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.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          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\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          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.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]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--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{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);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;forced-color-adjust:none}.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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap: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;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size: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)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap: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-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap: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;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.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          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (clearable() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.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]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--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{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);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;forced-color-adjust:none}.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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap: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;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size: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)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap: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-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap: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;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -7514,8 +7574,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => ColorPickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-color-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.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          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\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          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.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]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--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{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);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;forced-color-adjust:none}.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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap: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;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size: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)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap: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-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap: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;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
-        }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", 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"] }] } });
+                    ], template: "<div class=\"ea-color-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.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          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (clearable() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.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]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-color-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-color-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-color-picker__trigger--md{font-size:var(--font-size-md)}.ea-color-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-color-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--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{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);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;forced-color-adjust:none}.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;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.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__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap: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;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.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-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size: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)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap: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-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap: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;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
+        }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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"] }] } });
 function clamp01(n) {
     return Math.min(1, Math.max(0, n));
 }
@@ -8930,7 +8990,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      class=\"ea-date-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [attr.aria-disabled]=\"day.isDisabled || null\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      class=\"ea-date-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [attr.aria-disabled]=\"day.isDisabled || null\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -8949,7 +9009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-date-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      class=\"ea-date-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [attr.aria-disabled]=\"day.isDisabled || null\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
+                    ], template: "<div class=\"ea-date-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      class=\"ea-date-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [attr.aria-disabled]=\"day.isDisabled || null\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-date-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;padding-inline-end:calc(var(--ea-icon-button-size) + var(--space-2) * 2);font-family:var(--font-family-sans);text-align:start;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--xs{font-size:var(--font-size-xs)}.ea-date-picker__trigger--sm{font-size:var(--font-size-sm)}.ea-date-picker__trigger--md{font-size:var(--font-size-md)}.ea-date-picker__trigger--lg{font-size:var(--font-size-lg)}.ea-date-picker__trigger--xl{font-size:var(--font-size-xl)}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__trigger--error.ea-date-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
         }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -12192,6 +12252,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ], template: "<div class=\"ea-multi-select-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\"\n        (click)=\"toggle()\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + i\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__clear-icon{width:1em;height:1em}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-3);font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
         }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+class ChevronUpIconComponent extends IconComponentBase {
+    static slug = 'chevron-up';
+    static category = 'feather';
+    static tags = [
+        'chevron-up',
+        'chevron',
+        'up',
+        'arrow',
+        'collapse',
+        'haut',
+        'arriba',
+        'πάνω',
+        'góra',
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ChevronUpIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ChevronUpIconComponent, isStandalone: true, selector: "ea-icon-chevron-up", usesInheritance: true, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="strokeWidth()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <polyline points="18 15 12 9 6 15" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ChevronUpIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-chevron-up',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="strokeWidth()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <polyline points="18 15 12 9 6 15" />
+    </svg>
+  `,
+                }]
+        }] });
+
+/**
+ * Numeric field with increment and decrement steppers, min/max/step bounds, and
+ * the standard label, hint, and error chrome. The native input carries the
+ * `spinbutton` role, so arrow keys step it; the steppers are pointer
+ * affordances. Integrates with Angular forms via `ControlValueAccessor`.
+ */
+class NumberInputComponent {
+    inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    i18n = inject(EagamiI18nService);
+    /** Text label rendered above the field. */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown while the field is empty. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Visual size of the field. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below the field; hidden while an error is showing. */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message shown below the field; replaces the hint and flags the field invalid. */
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
+    /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
+    errorMessages = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    /** Disables the field. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Renders the field read-only. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Marks the field as required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Minimum value; typed values are clamped to it on blur and the steppers respect it. */
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum value; typed values are clamped to it on blur and the steppers respect it. */
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Amount each step (arrow key or stepper) adds or subtracts. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Whether negative values are allowed; when `false` the value floors at 0. */
+    allowNegative = input(true, ...(ngDevMode ? [{ debugName: "allowNegative" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the field when no visible `label` is set. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** `id` applied to the native input and label `for`; auto-generated when omitted. */
+    id = input(uniqueId('ea-number-input'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Current field value; `null` when empty. Two-way bindable via `[(value)]`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new value whenever it changes. */
+    changed = output();
+    /** Fires when the input receives focus. */
+    focused = output();
+    /** Fires when the input loses focus. */
+    blurred = output();
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* 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 */ []));
+    isInteractive = computed(() => !this.isDisabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    // The lower bound actually enforced: `min` normally, but floored at 0 when
+    // negatives are disallowed (even if `min` was set lower).
+    effectiveMin = computed(() => {
+        const min = this.min();
+        if (this.allowNegative()) {
+            return min;
+        }
+        return min == null ? 0 : Math.max(min, 0);
+    }, ...(ngDevMode ? [{ debugName: "effectiveMin" }] : /* istanbul ignore next */ []));
+    errorState = injectControlErrorState({
+        errorMsg: this.errorMsg,
+        errorMessages: this.errorMessages,
+    });
+    errorText = this.errorState.error;
+    hasError = this.errorState.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    canIncrement = computed(() => {
+        if (!this.isInteractive()) {
+            return false;
+        }
+        const max = this.max();
+        return max == null || (this.value() ?? this.min() ?? 0) < max;
+    }, ...(ngDevMode ? [{ debugName: "canIncrement" }] : /* istanbul ignore next */ []));
+    canDecrement = computed(() => {
+        if (!this.isInteractive()) {
+            return false;
+        }
+        const min = this.effectiveMin();
+        return min == null || (this.value() ?? this.max() ?? 0) > min;
+    }, ...(ngDevMode ? [{ debugName: "canDecrement" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => ({
+        [`ea-number-input-wrapper--${this.size()}`]: true,
+        'ea-number-input-wrapper--error': this.hasError(),
+        'ea-number-input-wrapper--focused': this.isFocused(),
+        'ea-number-input-wrapper--disabled': this.isDisabled(),
+        'ea-number-input-wrapper--readonly': this.readonly(),
+    }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Reflect the model onto the native element, but only when they differ
+        // NUMERICALLY: comparing text would clobber an in-progress decimal (typing
+        // "42." parses to 42, and rewriting "42" would drop the trailing dot).
+        effect(() => {
+            const el = this.inputEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const model = this.value();
+            const elValue = el.value === '' || Number.isNaN(el.valueAsNumber) ? null : el.valueAsNumber;
+            if (elValue !== model) {
+                el.value = model == null ? '' : String(model);
+            }
+        });
+    }
+    writeValue(val) {
+        // Do not clamp here: a CVA writeValue cannot call onChange, so clamping now
+        // would diverge the form model (unclamped) from the view. Bounds apply on
+        // interaction (blur after typing, or stepping) instead.
+        this.value.set(val == null || Number.isNaN(Number(val)) ? null : Number(val));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    handleInput() {
+        this.commitFromElement(false);
+    }
+    handleFocus(event) {
+        this.isFocused.set(true);
+        this.focused.emit(event);
+    }
+    handleBlur(event) {
+        this.commitFromElement(true);
+        this.isFocused.set(false);
+        this.onTouched();
+        this.blurred.emit(event);
+    }
+    // A focused number input changes value on scroll by default, easy to trigger
+    // by accident while scrolling the page.
+    handleWheel(event) {
+        if (this.isFocused()) {
+            event.preventDefault();
+        }
+    }
+    handleKeydown(event) {
+        // Exponent notation breaks the numeric bounds; block it. Also block the
+        // minus sign when negatives are disallowed.
+        if (event.key === 'e' ||
+            event.key === 'E' ||
+            (!this.allowNegative() && event.key === '-')) {
+            event.preventDefault();
+        }
+    }
+    // Keeps focus in the input while the mouse presses a stepper, so the field
+    // does not blur (and prematurely commit or mark touched) on each click.
+    onStepMousedown(event) {
+        event.preventDefault();
+    }
+    increment() {
+        this.stepBy(el => el.stepUp());
+    }
+    decrement() {
+        this.stepBy(el => el.stepDown());
+    }
+    /** Moves keyboard focus to the underlying native input element. */
+    focus() {
+        this.inputEl()?.nativeElement.focus();
+    }
+    stepBy(apply) {
+        const el = this.inputEl()?.nativeElement;
+        if (!el || !this.isInteractive()) {
+            return;
+        }
+        // Delegates to the native spinbutton so bounds, step, and grid-snapping
+        // match arrow-key stepping exactly.
+        apply(el);
+        this.commitFromElement(true);
+        el.focus();
+    }
+    // Reads the element, optionally clamps into the effective bounds, and emits
+    // only when the value actually changed (so a no-op blur does not dirty a form
+    // control or fire a spurious `changed`).
+    commitFromElement(clamp) {
+        const el = this.inputEl()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        let next = el.value === '' || Number.isNaN(el.valueAsNumber) ? null : el.valueAsNumber;
+        if (clamp && next != null) {
+            const clamped = this.clampToBounds(next);
+            if (clamped !== next) {
+                next = clamped;
+                el.value = String(next);
+            }
+        }
+        if (next === this.value()) {
+            return;
+        }
+        this.value.set(next);
+        this.onChange(next);
+        this.changed.emit(next);
+    }
+    clampToBounds(num) {
+        const min = this.effectiveMin();
+        const max = this.max();
+        if (min != null && num < min) {
+            return min;
+        }
+        if (max != null && num > max) {
+            return max;
+        }
+        return num;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: NumberInputComponent, isStandalone: true, selector: "ea-number-input", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed", focused: "focused", blurred: "blurred" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        hasError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{display:flex;align-items:center;justify-content:center;width:1.5em;height:1.1em;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-number-input-wrapper__step:hover:not(:disabled){background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.4}.ea-number-input-wrapper__step-icon{width:.875em;height:.875em;pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-number-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ChevronDownIconComponent,
+                        ChevronUpIconComponent,
+                        FieldLabelComponent,
+                        FieldMessagesComponent,
+                        NgClass,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        hasError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{display:flex;align-items:center;justify-content:center;width:1.5em;height:1.1em;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-number-input-wrapper__step:hover:not(:disabled){background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.4}.ea-number-input-wrapper__step-icon{width:.875em;height:.875em;pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", 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 }] }], 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 }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", 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"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
 /** Whether the runtime's `Intl` actually has number data for `locale` rather
  *  than silently negotiating down to a default (as reduced-ICU builds do). */
 function intlLocalizes(locale) {
@@ -12364,6 +12712,12 @@ class ProgressBarComponent {
     /** Shows the rounded percentage alongside the label. */
     showPercentage = input(false, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional buffered position ahead of `value` (same scale as `value`),
+     * rendered as a secondary-colour segment behind the fill. Use for
+     * download/upload-then-process style progress.
+     */
+    buffer = input(undefined, ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
     /** Whether to render the percentage. */
     showsPercentage = computed(() => this.showPercentage(), ...(ngDevMode ? [{ debugName: "showsPercentage" }] : /* istanbul ignore next */ []));
     percentage = computed(() => {
@@ -12374,18 +12728,26 @@ class ProgressBarComponent {
         return Math.min(100, Math.max(0, (this.value() / max) * 100));
     }, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
     percentageRounded = computed(() => Math.round(this.percentage()), ...(ngDevMode ? [{ debugName: "percentageRounded" }] : /* istanbul ignore next */ []));
+    bufferPercentage = computed(() => {
+        const buffer = this.buffer();
+        const max = this.max();
+        if (buffer == null || max <= 0) {
+            return null;
+        }
+        return Math.min(100, Math.max(0, (buffer / max) * 100));
+    }, ...(ngDevMode ? [{ debugName: "bufferPercentage" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-progress-bar--${this.variant()}`]: true,
         [`ea-progress-bar--${this.size()}`]: true,
         'ea-progress-bar--indeterminate': this.indeterminate(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showsPercentage()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">\n          {{ label() }}\n        </span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">\n          <bdi>{{ percentageRounded() }}%</bdi>\n        </span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__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-progress-bar__value{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-secondary)}.ea-progress-bar__track{overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showsPercentage()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">\n          {{ label() }}\n        </span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">\n          <bdi>{{ percentageRounded() }}%</bdi>\n        </span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    @if (bufferPercentage() !== null && !indeterminate()) {\n      <div\n        class=\"ea-progress-bar__buffer\"\n        [style.width]=\"bufferPercentage() + '%'\">\n      </div>\n    }\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n    </div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__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-progress-bar__value{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-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showsPercentage()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">\n          {{ label() }}\n        </span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">\n          <bdi>{{ percentageRounded() }}%</bdi>\n        </span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__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-progress-bar__value{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-secondary)}.ea-progress-bar__track{overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showsPercentage()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">\n          {{ label() }}\n        </span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">\n          <bdi>{{ percentageRounded() }}%</bdi>\n        </span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    @if (bufferPercentage() !== null && !indeterminate()) {\n      <div\n        class=\"ea-progress-bar__buffer\"\n        [style.width]=\"bufferPercentage() + '%'\">\n      </div>\n    }\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\">\n    </div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--xs{--ea-progress-bar-size: .125rem}.ea-progress-bar--sm{--ea-progress-bar-size: .25rem}.ea-progress-bar--md{--ea-progress-bar-size: .375rem}.ea-progress-bar--lg{--ea-progress-bar-size: .5rem}.ea-progress-bar--xl{--ea-progress-bar-size: .625rem}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__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-progress-bar__value{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-secondary)}.ea-progress-bar__track{position:relative;overflow:hidden;height:var(--ea-progress-bar-size, .375rem);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__buffer{z-index:0;position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-secondary-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar__fill{z-index:1;position:relative;height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(calc(-110% * var(--ea-rtl-sign)))}to{transform:translate(calc(260% * var(--ea-rtl-sign)))}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }] } });
 
 /**
  * Composite single-select control made up of `ea-radio` children. Manages
@@ -13655,11 +14017,11 @@ class StepperComponent {
         return -1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"ea-stepper__button\"\n        [class.ea-stepper__button--active]=\"i === activeStep()\"\n        [class.ea-stepper__button--completed]=\"step.completed()\"\n        [id]=\"step.id() + '-tab'\"\n        [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n        [attr.aria-selected]=\"i === activeStep()\"\n        [disabled]=\"!canNavigateTo(i)\"\n        [tabindex]=\"i === activeStep() ? 0 : -1\"\n        (click)=\"selectStep(i)\">\n        <span\n          class=\"ea-stepper__circle\"\n          aria-hidden=\"true\">\n          @if (step.completed()) {\n            <ea-icon-check />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"ea-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"ea-stepper__optional\">\n              ({{ i18n.messages().stepper.optional }})\n            </span>\n          }\n        </span>\n        @if (step.completed()) {\n          <span class=\"ea-stepper__completed-label\">\n            {{ i18n.messages().stepper.stepCompleted }}\n          </span>\n        }\n      </button>\n      @if (i < registeredSteps().length - 1) {\n        <span\n          class=\"ea-stepper__connector\"\n          [class.ea-stepper__connector--completed]=\"step.completed()\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"ea-stepper__button\"\n        [class.ea-stepper__button--active]=\"i === activeStep()\"\n        [class.ea-stepper__button--completed]=\"step.completed()\"\n        [id]=\"step.id() + '-tab'\"\n        [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n        [attr.aria-selected]=\"i === activeStep()\"\n        [disabled]=\"!canNavigateTo(i)\"\n        [tabindex]=\"i === activeStep() ? 0 : -1\"\n        (click)=\"selectStep(i)\">\n        <span\n          class=\"ea-stepper__circle\"\n          aria-hidden=\"true\">\n          @if (step.completed()) {\n            <ea-icon-check />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"ea-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"ea-stepper__optional\">\n              ({{ i18n.messages().stepper.optional }})\n            </span>\n          }\n        </span>\n        @if (step.completed()) {\n          <span class=\"ea-stepper__completed-label\">\n            {{ i18n.messages().stepper.stepCompleted }}\n          </span>\n        }\n      </button>\n      @if (i < registeredSteps().length - 1) {\n        <span\n          class=\"ea-stepper__connector\"\n          [class.ea-stepper__connector--completed]=\"step.completed()\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"ea-stepper__button\"\n        [class.ea-stepper__button--active]=\"i === activeStep()\"\n        [class.ea-stepper__button--completed]=\"step.completed()\"\n        [id]=\"step.id() + '-tab'\"\n        [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n        [attr.aria-selected]=\"i === activeStep()\"\n        [disabled]=\"!canNavigateTo(i)\"\n        [tabindex]=\"i === activeStep() ? 0 : -1\"\n        (click)=\"selectStep(i)\">\n        <span\n          class=\"ea-stepper__circle\"\n          aria-hidden=\"true\">\n          @if (step.completed()) {\n            <ea-icon-check />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"ea-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"ea-stepper__optional\">\n              ({{ i18n.messages().stepper.optional }})\n            </span>\n          }\n        </span>\n        @if (step.completed()) {\n          <span class=\"ea-stepper__completed-label\">\n            {{ i18n.messages().stepper.stepCompleted }}\n          </span>\n        }\n      </button>\n      @if (i < registeredSteps().length - 1) {\n        <span\n          class=\"ea-stepper__connector\"\n          [class.ea-stepper__connector--completed]=\"step.completed()\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
+            args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n  class=\"ea-stepper\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-stepper__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"ea-stepper__button\"\n        [class.ea-stepper__button--active]=\"i === activeStep()\"\n        [class.ea-stepper__button--completed]=\"step.completed()\"\n        [id]=\"step.id() + '-tab'\"\n        [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n        [attr.aria-selected]=\"i === activeStep()\"\n        [disabled]=\"!canNavigateTo(i)\"\n        [tabindex]=\"i === activeStep() ? 0 : -1\"\n        (click)=\"selectStep(i)\">\n        <span\n          class=\"ea-stepper__circle\"\n          aria-hidden=\"true\">\n          @if (step.completed()) {\n            <ea-icon-check />\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"ea-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <span class=\"ea-stepper__optional\">\n              ({{ i18n.messages().stepper.optional }})\n            </span>\n          }\n        </span>\n        @if (step.completed()) {\n          <span class=\"ea-stepper__completed-label\">\n            {{ i18n.messages().stepper.stepCompleted }}\n          </span>\n        }\n      </button>\n      @if (i < registeredSteps().length - 1) {\n        <span\n          class=\"ea-stepper__connector\"\n          [class.ea-stepper__connector--completed]=\"step.completed()\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
         }], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -14024,58 +14386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ], template: "<div class=\"ea-textarea-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--xs{font-size:var(--font-size-xs)}.ea-textarea-wrapper--sm{font-size:var(--font-size-sm)}.ea-textarea-wrapper--md{font-size:var(--font-size-md)}.ea-textarea-wrapper--lg{font-size:var(--font-size-lg)}.ea-textarea-wrapper--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", 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 }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", 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"] }] } });
 
-class ChevronUpIconComponent extends IconComponentBase {
-    static slug = 'chevron-up';
-    static category = 'feather';
-    static tags = [
-        'chevron-up',
-        'chevron',
-        'up',
-        'arrow',
-        'collapse',
-        'haut',
-        'arriba',
-        'πάνω',
-        'góra',
-    ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ChevronUpIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ChevronUpIconComponent, isStandalone: true, selector: "ea-icon-chevron-up", usesInheritance: true, ngImport: i0, template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      [attr.stroke-width]="strokeWidth()"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <polyline points="18 15 12 9 6 15" />
-    </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ChevronUpIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ea-icon-chevron-up',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      [attr.stroke-width]="strokeWidth()"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      width="100%"
-      height="100%">
-      <polyline points="18 15 12 9 6 15" />
-    </svg>
-  `,
-                }]
-        }] });
-
 class ClockIconComponent extends IconComponentBase {
     static slug = 'clock';
     static category = 'feather';
@@ -38246,5 +38556,5 @@ const ICONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BitcoinIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarCheckIconComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileIconComponent, FileMinusIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FlagIconComponent, FlameIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderPlusIconComponent, FormFieldComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KubernetesIconComponent, LampIconComponent, LayersIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NotionIconComponent, NpmIconComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PieChartIconComponent, PlayCircleIconComponent, PlayIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, QrCodeIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, hexToOklch, iconDisplayName, is, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, validatePalette, visibleNodeIds, walkTree, zhCN };
+export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BitcoinIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, ButtonComponent, CalendarCheckIconComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileIconComponent, FileMinusIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FlagIconComponent, FlameIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderPlusIconComponent, FormFieldComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KubernetesIconComponent, LampIconComponent, LayersIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PieChartIconComponent, PlayCircleIconComponent, PlayIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, QrCodeIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, Share2IconComponent, ShareIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, hexToOklch, iconDisplayName, is, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, validatePalette, visibleNodeIds, walkTree, zhCN };
 //# sourceMappingURL=eagami-ui.mjs.map