@eagami/ui 2.6.0 → 2.8.0

package/fesm2022/eagami-ui.mjs

@@ -1399,11 +1399,11 @@ class AccordionItemComponent {
         this.accordion.toggle(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccordionItemComponent, isStandalone: true, selector: "ea-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-accordion-item\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <button\n    class=\"ea-accordion-item__trigger\"\n    type=\"button\"\n    [id]=\"id() + '-trigger'\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"id() + '-content'\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\">\n    <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n    <ea-icon-chevron-down\n      class=\"ea-accordion-item__chevron\"\n      aria-hidden=\"true\" />\n  </button>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:16px;height:16px;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:var(--space-2) var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccordionItemComponent, isStandalone: true, selector: "ea-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-accordion-item\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <button\n    class=\"ea-accordion-item__trigger\"\n    type=\"button\"\n    [id]=\"id() + '-trigger'\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"id() + '-content'\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\">\n    <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n    <ea-icon-chevron-down\n      class=\"ea-accordion-item__chevron\"\n      aria-hidden=\"true\" />\n  </button>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:var(--space-2) var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-accordion-item', imports: [ChevronDownIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ea-accordion-item\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <button\n    class=\"ea-accordion-item__trigger\"\n    type=\"button\"\n    [id]=\"id() + '-trigger'\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"id() + '-content'\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\">\n    <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n    <ea-icon-chevron-down\n      class=\"ea-accordion-item__chevron\"\n      aria-hidden=\"true\" />\n  </button>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:16px;height:16px;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:var(--space-2) var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"] }]
+            args: [{ selector: 'ea-accordion-item', imports: [ChevronDownIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ea-accordion-item\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <button\n    class=\"ea-accordion-item__trigger\"\n    type=\"button\"\n    [id]=\"id() + '-trigger'\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"id() + '-content'\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\">\n    <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n    <ea-icon-chevron-down\n      class=\"ea-accordion-item__chevron\"\n      aria-hidden=\"true\" />\n  </button>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:var(--space-2) var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class AlertCircleIconComponent extends IconComponentBase {
@@ -1673,12 +1673,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class AlertComponent {
     i18n = inject(EagamiI18nService);
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
     visible = model(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Overrides the variant's default status icon with any icon component. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Fires when the user dismisses the alert via its close button. */
     dismissed = output();
     alertClasses = computed(() => ({
         [`ea-alert--${this.variant()}`]: true,
+        [`ea-alert--${this.size()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "alertClasses" }] : /* istanbul ignore next */ []));
     role = computed(() => {
         const v = this.variant();
@@ -1690,7 +1694,7 @@ class AlertComponent {
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [ngClass]=\"alertClasses()\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @if (icon(); as customIcon) {\n        <ng-container *ngComponentOutlet=\"customIcon\" />\n      } @else {\n        @switch (variant()) {\n          @case ('success') {\n            <ea-icon-check />\n          }\n          @case ('warning') {\n            <ea-icon-alert-circle />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle />\n          }\n          @case ('info') {\n            <ea-icon-info />\n          }\n          @default {\n            <ea-icon-info />\n          }\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:center;gap:.5em;padding:.75em 1em;font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--xs{font-size:var(--font-size-xs)}.ea-alert--sm{font-size:var(--font-size-sm)}.ea-alert--md{font-size:var(--font-size-md)}.ea-alert--lg{font-size:var(--font-size-lg)}.ea-alert--xl{font-size:var(--font-size-xl)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{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-alert__close>*{font-size:1.25em}.ea-alert__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-alert__close:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -1699,8 +1703,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         CheckIconComponent,
                         InfoIconComponent,
                         XIconComponent,
-                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:calc(1em * var(--line-height-normal))}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+                        NgClass,
+                        NgComponentOutlet,
+                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [ngClass]=\"alertClasses()\"\n    [attr.role]=\"role()\">\n    <span\n      class=\"ea-alert__icon\"\n      aria-hidden=\"true\">\n      @if (icon(); as customIcon) {\n        <ng-container *ngComponentOutlet=\"customIcon\" />\n      } @else {\n        @switch (variant()) {\n          @case ('success') {\n            <ea-icon-check />\n          }\n          @case ('warning') {\n            <ea-icon-alert-circle />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle />\n          }\n          @case ('info') {\n            <ea-icon-info />\n          }\n          @default {\n            <ea-icon-info />\n          }\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        [attr.aria-label]=\"i18n.messages().alert.dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:center;gap:.5em;padding:.75em 1em;font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--xs{font-size:var(--font-size-xs)}.ea-alert--sm{font-size:var(--font-size-sm)}.ea-alert--md{font-size:var(--font-size-md)}.ea-alert--lg{font-size:var(--font-size-lg)}.ea-alert--xl{font-size:var(--font-size-xl)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{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-alert__close>*{font-size:1.25em}.ea-alert__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-alert__close:disabled{cursor:not-allowed;opacity:.5}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
 // Shared field label for form-like components. Renders a `<label for>` when
 // `forId` points at a single control, otherwise a `<span>` (grouped controls
@@ -1929,7 +1935,7 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-lg)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ 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 });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--xs{font-size:var(--font-size-xs)}.ea-autocomplete__wrapper--sm{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--lg{font-size:var(--font-size-lg)}.ea-autocomplete__wrapper--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ 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: AutocompleteComponent, decorators: [{
             type: Component,
@@ -1939,7 +1945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\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-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-lg)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"] }]
+                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\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-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ resolvedEmptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--xs{font-size:var(--font-size-xs)}.ea-autocomplete__wrapper--sm{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--lg{font-size:var(--font-size-lg)}.ea-autocomplete__wrapper--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"] }]
         }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3425,11 +3431,11 @@ class AvatarComponent {
         event.target.style.display = 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AvatarComponent, isStandalone: true, selector: "ea-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-block; line-height: 0;" }, ngImport: i0, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || initials() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserIconComponent, selector: "ea-icon-user" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AvatarComponent, isStandalone: true, selector: "ea-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-block; line-height: 0;" }, ngImport: i0, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || initials() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;width:var(--ea-avatar-size, 2.5rem);height:var(--ea-avatar-size, 2.5rem);background-color:var(--color-bg-emphasis);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{--ea-avatar-size: 1.5rem}.ea-avatar--sm{--ea-avatar-size: 2rem}.ea-avatar--md{--ea-avatar-size: 2.5rem}.ea-avatar--lg{--ea-avatar-size: 3rem}.ea-avatar--xl{--ea-avatar-size: 4rem}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{font-size:calc(var(--ea-avatar-size, 2.5rem) * .4);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{font-size:calc(var(--ea-avatar-size, 2.5rem) * .6)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserIconComponent, selector: "ea-icon-user" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-avatar', imports: [NgClass, UserIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { style: 'display: inline-block; line-height: 0;' }, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || initials() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"] }]
+            args: [{ selector: 'ea-avatar', imports: [NgClass, UserIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { style: 'display: inline-block; line-height: 0;' }, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || initials() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;width:var(--ea-avatar-size, 2.5rem);height:var(--ea-avatar-size, 2.5rem);background-color:var(--color-bg-emphasis);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{--ea-avatar-size: 1.5rem}.ea-avatar--sm{--ea-avatar-size: 2rem}.ea-avatar--md{--ea-avatar-size: 2.5rem}.ea-avatar--lg{--ea-avatar-size: 3rem}.ea-avatar--xl{--ea-avatar-size: 4rem}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{font-size:calc(var(--ea-avatar-size, 2.5rem) * .4);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{font-size:calc(var(--ea-avatar-size, 2.5rem) * .6)}\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
 /**
@@ -3446,11 +3452,11 @@ class BadgeComponent {
         [`ea-badge--${this.shape()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--pin{justify-content:center;box-sizing:border-box;padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{min-width:var(--ea-badge-size, 16px);height:var(--ea-badge-size, 16px);font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{min-width:var(--ea-badge-size, 18px);height:var(--ea-badge-size, 18px);font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{min-width:var(--ea-badge-size, 22px);height:var(--ea-badge-size, 22px);font-size:var(--ea-badge-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-2xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--pin{justify-content:center;box-sizing:border-box;min-width:var(--ea-badge-size, 1.8em);height:var(--ea-badge-size, 1.8em);padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--pin{justify-content:center;box-sizing:border-box;padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{min-width:var(--ea-badge-size, 16px);height:var(--ea-badge-size, 16px);font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{min-width:var(--ea-badge-size, 18px);height:var(--ea-badge-size, 18px);font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{min-width:var(--ea-badge-size, 22px);height:var(--ea-badge-size, 22px);font-size:var(--ea-badge-font-size, 12px)}\n"] }]
+            args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:.25em;padding:.25em .625em;white-space:nowrap;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border-style:solid;border-width:var(--ea-badge-border-width, 0);border-color:var(--ea-badge-border-color, transparent);border-radius:var(--radius-full)}.ea-badge--xs{font-size:var(--ea-badge-font-size, var(--font-size-2xs))}.ea-badge--sm{font-size:var(--ea-badge-font-size, var(--font-size-xs))}.ea-badge--md{font-size:var(--ea-badge-font-size, var(--font-size-sm))}.ea-badge--lg{font-size:var(--ea-badge-font-size, var(--font-size-md))}.ea-badge--xl{font-size:var(--ea-badge-font-size, var(--font-size-lg))}.ea-badge--default{background-color:var(--ea-badge-background-color, var(--color-bg-muted));color:var(--ea-badge-color, var(--color-text-secondary))}.ea-badge--success{background-color:var(--ea-badge-background-color, var(--color-success-subtle));color:var(--ea-badge-color, var(--color-success-text))}.ea-badge--warning{background-color:var(--ea-badge-background-color, var(--color-warning-subtle));color:var(--ea-badge-color, var(--color-warning-text))}.ea-badge--error{background-color:var(--ea-badge-background-color, var(--color-error-subtle));color:var(--ea-badge-color, var(--color-error-text))}.ea-badge--info{background-color:var(--ea-badge-background-color, var(--color-info-subtle));color:var(--ea-badge-color, var(--color-info-text))}.ea-badge--pin{justify-content:center;box-sizing:border-box;min-width:var(--ea-badge-size, 1.8em);height:var(--ea-badge-size, 1.8em);padding:0 var(--space-1);font-variant-numeric:tabular-nums}.ea-badge--pin.ea-badge--sm{font-size:var(--ea-badge-font-size, 9px)}.ea-badge--pin.ea-badge--md{font-size:var(--ea-badge-font-size, 10px)}.ea-badge--pin.ea-badge--lg{font-size:var(--ea-badge-font-size, 12px)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
 class ChevronRightIconComponent extends IconComponentBase {
@@ -3550,6 +3556,8 @@ class ButtonComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Optional icon component rendered to the left of the label. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     ariaCurrent = input(undefined, { ...(ngDevMode ? { debugName: "ariaCurrent" } : /* istanbul ignore next */ {}), alias: 'aria-current' });
     /** Fires when the button is activated; suppressed while disabled or loading. */
@@ -3570,14 +3578,14 @@ class ButtonComponent {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ea-button', imports: [NgClass, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ea-button--full-width]': 'fullWidth()',
-                    }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-current", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+                    }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-button__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-current", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Thin separator used to visually divide content. Renders horizontally by
@@ -3586,17 +3594,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class DividerComponent {
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Renders a heavier rule. */
+    thick = input(false, ...(ngDevMode ? [{ debugName: "thick" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-divider--${this.orientation()}`]: true,
         'ea-divider--with-label': !!this.label(),
+        'ea-divider--thick': this.thick(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-subtle)}.ea-divider--vertical{display:inline-block;width:1px;height:1.5em;min-height:1rem;background-color:var(--color-border-subtle)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-subtle)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, thick: { classPropertyName: "thick", publicName: "thick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{--ea-divider-thickness: 1px;flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--thick{--ea-divider-thickness: 2px}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider--vertical{display:inline-block;width:var(--ea-divider-thickness);height:1.5em;min-height:1rem;background-color:var(--color-divider)}.ea-divider--vertical.ea-divider--with-label{display:inline-flex;flex-direction:column;align-items:center;width:auto;height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--vertical.ea-divider--with-label:before,.ea-divider--vertical.ea-divider--with-label:after{content:\"\";flex:1;width:var(--ea-divider-thickness);height:auto;min-height:2em;background-color:var(--color-divider)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-subtle)}.ea-divider--vertical{display:inline-block;width:1px;height:1.5em;min-height:1rem;background-color:var(--color-border-subtle)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-subtle)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+            args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{--ea-divider-thickness: 1px;flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--thick{--ea-divider-thickness: 2px}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider--vertical{display:inline-block;width:var(--ea-divider-thickness);height:1.5em;min-height:1rem;background-color:var(--color-divider)}.ea-divider--vertical.ea-divider--with-label{display:inline-flex;flex-direction:column;align-items:center;width:auto;height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--vertical.ea-divider--with-label:before,.ea-divider--vertical.ea-divider--with-label:after{content:\"\";flex:1;width:var(--ea-divider-thickness);height:auto;min-height:2em;background-color:var(--color-divider)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], thick: [{ type: i0.Input, args: [{ isSignal: true, alias: "thick", required: false }] }] } });
 
 /**
  * Surface for grouping related content. Provides optional `header` and
@@ -3616,7 +3627,7 @@ class CardComponent {
         'ea-card--full-width': this.fullWidth(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerDivider: { classPropertyName: "headerDivider", publicName: "headerDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-card__header\"\n    [style.text-align]=\"headerAlign()\">\n    <ng-content select=\"[slot=header]\" />\n  </div>\n\n  @if (headerDivider()) {\n    <ea-divider class=\"ea-card__divider\" />\n  }\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[slot=footer]\" />\n  </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}.ea-card{display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none .ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none .ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm .ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm .ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md .ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md .ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg .ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg .ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl .ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl .ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label"] }, { 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: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerDivider: { classPropertyName: "headerDivider", publicName: "headerDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-card__header\"\n    [style.text-align]=\"headerAlign()\">\n    <ng-content select=\"[slot=header]\" />\n  </div>\n\n  @if (headerDivider()) {\n    <ea-divider class=\"ea-card__divider\" />\n  }\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[slot=footer]\" />\n  </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}.ea-card{display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none .ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none .ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm .ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm .ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md .ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md .ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg .ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg .ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl .ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl .ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label", "thick"] }, { 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: CardComponent, decorators: [{
             type: Component,
@@ -3692,7 +3703,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm)}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-md)}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-lg)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--xs{font-size:var(--font-size-xs)}.ea-checkbox--sm{font-size:var(--font-size-sm)}.ea-checkbox--md{font-size:var(--font-size-md)}.ea-checkbox--lg{font-size:var(--font-size-lg)}.ea-checkbox--xl{font-size:var(--font-size-xl)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:1.25em;height:1.25em;border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: 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: CheckboxComponent, decorators: [{
             type: Component,
@@ -3702,7 +3713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm)}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-md)}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-lg)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"] }]
+                    ], template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n        @if (count() !== undefined && count() !== null) {\n          <span class=\"ea-checkbox__count\">{{ count() }}</span>\n        }\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-flex;vertical-align:middle;line-height:1}.ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--xs{font-size:var(--font-size-xs)}.ea-checkbox--sm{font-size:var(--font-size-sm)}.ea-checkbox--md{font-size:var(--font-size-md)}.ea-checkbox--lg{font-size:var(--font-size-lg)}.ea-checkbox--xl{font-size:var(--font-size-xl)}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:1.25em;height:1.25em;border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox__count{margin-left:.25em;color:var(--color-text-tertiary)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class SearchIconComponent extends IconComponentBase {
@@ -4024,11 +4035,11 @@ class CommandPaletteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CommandPaletteComponent, isStandalone: true, selector: "ea-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", execute: "execute" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-expanded]=\"true\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"placeholder() || messages().commandPalette.searchPlaceholder\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p class=\"ea-command-palette__empty\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__group\"\n              role=\"presentation\">\n              {{ group.group }}\n            </li>\n          }\n          @for (entry of group.items; track entry.item.id) {\n            <li\n              class=\"ea-command-palette__item\"\n              role=\"option\"\n              [id]=\"itemDomId(entry.item)\"\n              [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n              [class.ea-command-palette__item--active]=\"\n                showActiveHighlight(entry.flatIndex)\n              \"\n              [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\n              (click)=\"onItemClick(entry.item)\"\n              (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n              @if (entry.item.icon; as iconClass) {\n                <span\n                  class=\"ea-command-palette__item-icon\"\n                  aria-hidden=\"true\">\n                  <ng-container *ngComponentOutlet=\"iconClass\" />\n                </span>\n              }\n              <span class=\"ea-command-palette__item-text\">\n                <span class=\"ea-command-palette__item-label\">\n                  {{ entry.item.label }}\n                </span>\n                @if (entry.item.description) {\n                  <span class=\"ea-command-palette__item-description\">\n                    {{ entry.item.description }}\n                  </span>\n                }\n              </span>\n              @if (entry.item.shortcut) {\n                <kbd class=\"ea-command-palette__item-shortcut\">\n                  {{ entry.item.shortcut }}\n                </kbd>\n              }\n            </li>\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--color-bg-elevated)}.ea-command-palette__search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer}.ea-command-palette__clear:hover{background-color:var(--color-state-hover)}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__group{position:relative;margin-top:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__group:before{content:\"\";position:absolute;top:0;right:0;left:0;height:var(--border-width-thin);background-color:var(--color-border-default)}.ea-command-palette__group:first-child{margin-top:0}.ea-command-palette__group:first-child:before{display:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-elevated);color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CommandPaletteComponent, isStandalone: true, selector: "ea-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", execute: "execute" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-expanded]=\"true\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"placeholder() || messages().commandPalette.searchPlaceholder\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p class=\"ea-command-palette__empty\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__group\"\n              role=\"presentation\">\n              {{ group.group }}\n            </li>\n          }\n          @for (entry of group.items; track entry.item.id) {\n            <li\n              class=\"ea-command-palette__item\"\n              role=\"option\"\n              [id]=\"itemDomId(entry.item)\"\n              [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n              [class.ea-command-palette__item--active]=\"\n                showActiveHighlight(entry.flatIndex)\n              \"\n              [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\n              (click)=\"onItemClick(entry.item)\"\n              (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n              @if (entry.item.icon; as iconClass) {\n                <span\n                  class=\"ea-command-palette__item-icon\"\n                  aria-hidden=\"true\">\n                  <ng-container *ngComponentOutlet=\"iconClass\" />\n                </span>\n              }\n              <span class=\"ea-command-palette__item-text\">\n                <span class=\"ea-command-palette__item-label\">\n                  {{ entry.item.label }}\n                </span>\n                @if (entry.item.description) {\n                  <span class=\"ea-command-palette__item-description\">\n                    {{ entry.item.description }}\n                  </span>\n                }\n              </span>\n              @if (entry.item.shortcut) {\n                <kbd class=\"ea-command-palette__item-shortcut\">\n                  {{ entry.item.shortcut }}\n                </kbd>\n              }\n            </li>\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--color-bg-elevated)}.ea-command-palette__search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__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-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__group{position:relative;margin-top:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__group:before{content:\"\";position:absolute;top:0;right:0;left:0;height:var(--border-width-thin);background-color:var(--color-border-default)}.ea-command-palette__group:first-child{margin-top:0}.ea-command-palette__group:first-child:before{display:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-elevated);color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CommandPaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, SearchIconComponent, XIconComponent], template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-expanded]=\"true\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"placeholder() || messages().commandPalette.searchPlaceholder\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p class=\"ea-command-palette__empty\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__group\"\n              role=\"presentation\">\n              {{ group.group }}\n            </li>\n          }\n          @for (entry of group.items; track entry.item.id) {\n            <li\n              class=\"ea-command-palette__item\"\n              role=\"option\"\n              [id]=\"itemDomId(entry.item)\"\n              [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n              [class.ea-command-palette__item--active]=\"\n                showActiveHighlight(entry.flatIndex)\n              \"\n              [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\n              (click)=\"onItemClick(entry.item)\"\n              (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n              @if (entry.item.icon; as iconClass) {\n                <span\n                  class=\"ea-command-palette__item-icon\"\n                  aria-hidden=\"true\">\n                  <ng-container *ngComponentOutlet=\"iconClass\" />\n                </span>\n              }\n              <span class=\"ea-command-palette__item-text\">\n                <span class=\"ea-command-palette__item-label\">\n                  {{ entry.item.label }}\n                </span>\n                @if (entry.item.description) {\n                  <span class=\"ea-command-palette__item-description\">\n                    {{ entry.item.description }}\n                  </span>\n                }\n              </span>\n              @if (entry.item.shortcut) {\n                <kbd class=\"ea-command-palette__item-shortcut\">\n                  {{ entry.item.shortcut }}\n                </kbd>\n              }\n            </li>\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--color-bg-elevated)}.ea-command-palette__search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer}.ea-command-palette__clear:hover{background-color:var(--color-state-hover)}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__group{position:relative;margin-top:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__group:before{content:\"\";position:absolute;top:0;right:0;left:0;height:var(--border-width-thin);background-color:var(--color-border-default)}.ea-command-palette__group:first-child{margin-top:0}.ea-command-palette__group:first-child:before{display:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-elevated);color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"] }]
+            args: [{ selector: 'ea-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, SearchIconComponent, XIconComponent], template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-expanded]=\"true\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"placeholder() || messages().commandPalette.searchPlaceholder\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p class=\"ea-command-palette__empty\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__group\"\n              role=\"presentation\">\n              {{ group.group }}\n            </li>\n          }\n          @for (entry of group.items; track entry.item.id) {\n            <li\n              class=\"ea-command-palette__item\"\n              role=\"option\"\n              [id]=\"itemDomId(entry.item)\"\n              [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n              [class.ea-command-palette__item--active]=\"\n                showActiveHighlight(entry.flatIndex)\n              \"\n              [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\n              (click)=\"onItemClick(entry.item)\"\n              (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n              @if (entry.item.icon; as iconClass) {\n                <span\n                  class=\"ea-command-palette__item-icon\"\n                  aria-hidden=\"true\">\n                  <ng-container *ngComponentOutlet=\"iconClass\" />\n                </span>\n              }\n              <span class=\"ea-command-palette__item-text\">\n                <span class=\"ea-command-palette__item-label\">\n                  {{ entry.item.label }}\n                </span>\n                @if (entry.item.description) {\n                  <span class=\"ea-command-palette__item-description\">\n                    {{ entry.item.description }}\n                  </span>\n                }\n              </span>\n              @if (entry.item.shortcut) {\n                <kbd class=\"ea-command-palette__item-shortcut\">\n                  {{ entry.item.shortcut }}\n                </kbd>\n              }\n            </li>\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--color-bg-elevated)}.ea-command-palette__search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__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-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__group{position:relative;margin-top:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__group:before{content:\"\";position:absolute;top:0;right:0;left:0;height:var(--border-width-thin);background-color:var(--color-border-default)}.ea-command-palette__group:first-child{margin-top:0}.ea-command-palette__group:first-child:before{display:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-elevated);color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], execute: [{ type: i0.Output, args: ["execute"] }], dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }] } });
 
 class DropletIconComponent extends IconComponentBase {
@@ -4121,8 +4132,11 @@ class PopoverComponent {
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** DOM id for the surface so trigger elements can reference it via aria-controls. */
     surfaceId = input(uniqueId('ea-popover'), ...(ngDevMode ? [{ debugName: "surfaceId" }] : /* istanbul ignore next */ []));
-    /** Gap in px between the anchor and the popover. */
-    offset = input(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /**
+     * Gap in px between the anchor and the popover. Defaults to 2 so an open panel
+     * clears the anchor's active focus ring instead of sitting flush over it.
+     */
+    offset = input(2, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
     /** Flip to the opposite side when the requested side overflows the viewport. */
     flip = input(true, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
     /** Clamp the popover inside the viewport when it would otherwise overflow. */
@@ -4262,10 +4276,18 @@ class PopoverComponent {
         // the response. SSR guard is required because the website prerenders pages
         // that mount popovers.
         if (typeof window !== 'undefined') {
-            const onViewportChange = () => {
+            const onViewportChange = (event) => {
                 if (!this.open()) {
                     return;
                 }
+                // Scrolling within the popover's own surface (e.g. a long dropdown list)
+                // must not dismiss or re-track it; only outside/viewport scroll should.
+                const target = event?.target;
+                if (event?.type === 'scroll' &&
+                    target &&
+                    this.surfaceEl()?.nativeElement.contains(target)) {
+                    return;
+                }
                 const behavior = this.scrollBehavior();
                 if (behavior === 'close') {
                     this.closeRequested.emit();
@@ -4888,7 +4910,7 @@ class ColorPickerComponent {
                 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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <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      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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--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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: 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", "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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <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      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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:left;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)}.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)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{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)}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;right: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}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: 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", "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,
@@ -4905,7 +4927,7 @@ 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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <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      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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--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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-color-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-color-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__clear-icon{width:1em;height:1em}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125rem;height:1.125rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
+                    ], template: "<div class=\"ea-color-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <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      placement=\"bottom-start\"\n      role=\"dialog\"\n      [ariaLabel]=\"label() || i18n.messages().colorPicker.placeholder\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPointerLeft()\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"inputMode() === 'hex'\">\n          @if (inputMode() === 'hex') {\n            <label class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n              <span class=\"ea-color-picker__input-label\">HEX</span>\n              <input\n                class=\"ea-color-picker__input\"\n                type=\"text\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                maxlength=\"9\"\n                [value]=\"hexInputValue()\"\n                (input)=\"onHexInput($event)\"\n                (blur)=\"onHexBlur()\" />\n            </label>\n          } @else {\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">R</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().r\"\n                (input)=\"onRgbInput('r', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">G</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().g\"\n                (input)=\"onRgbInput('g', $event)\" />\n            </label>\n            <label class=\"ea-color-picker__input-group\">\n              <span class=\"ea-color-picker__input-label\">B</span>\n              <input\n                class=\"ea-color-picker__input ea-color-picker__input--num\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                pattern=\"\\d*\"\n                maxlength=\"3\"\n                [value]=\"rgb().b\"\n                (input)=\"onRgbInput('b', $event)\" />\n            </label>\n            @if (showAlpha()) {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">A</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"alphaPercentRounded()\"\n                  (input)=\"onAlphaInput($event)\" />\n              </label>\n            }\n          }\n          <button\n            type=\"button\"\n            class=\"ea-color-picker__format-toggle\"\n            [attr.aria-label]=\"i18n.messages().colorPicker.toggleFormat\"\n            (click)=\"cycleInputMode()\">\n            {{ inputMode() === 'hex' ? 'HEX' : 'RGB' }}\n          </button>\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span class=\"ea-color-picker__presets-label\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"listbox\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  role=\"option\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-selected]=\"value() === preset\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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:left;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)}.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)}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{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)}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;right: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}.ea-color-picker__swatch--lg{width:2.5rem;height:2.5rem;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block}.ea-color-picker__popover{display:flex;flex-direction:column;gap:var(--space-3);width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10rem;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent)}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent)}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-2)}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:var(--space-2)}.ea-color-picker__strip{position:relative;width:100%;height:.75rem;border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875rem;height:.875rem;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:var(--space-1)}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:3.25rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:var(--space-1) var(--space-1-5);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:var(--space-1-5);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1)}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"] }]
         }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], svAreaEl: [{ type: i0.ViewChild, args: ['svAreaEl', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrackEl', { isSignal: true }] }], alphaTrackEl: [{ type: i0.ViewChild, args: ['alphaTrackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 function clamp01(n) {
     return Math.min(1, Math.max(0, n));
@@ -5577,7 +5599,7 @@ class CodeInputComponent {
                 useExisting: forwardRef(() => CodeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--xs .ea-code-input{font-size:var(--font-size-xs)}.ea-code-input-group--sm .ea-code-input{font-size:var(--font-size-sm)}.ea-code-input-group--md .ea-code-input{font-size:var(--font-size-md)}.ea-code-input-group--lg .ea-code-input{font-size:var(--font-size-lg)}.ea-code-input-group--xl .ea-code-input{font-size:var(--font-size-xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;width:2.5em;height:3em;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
@@ -5587,7 +5609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => CodeInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? i18n.messages().codeInput.groupLabel(length()) : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--xs .ea-code-input{font-size:var(--font-size-xs)}.ea-code-input-group--sm .ea-code-input{font-size:var(--font-size-sm)}.ea-code-input-group--md .ea-code-input{font-size:var(--font-size-md)}.ea-code-input-group--lg .ea-code-input{font-size:var(--font-size-lg)}.ea-code-input-group--xl .ea-code-input{font-size:var(--font-size-xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;width:2.5em;height:3em;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { digitEls: [{ type: i0.ViewChildren, args: ['digitEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
 class CalendarIconComponent extends IconComponentBase {
@@ -6115,7 +6137,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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <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      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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--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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:var(--space-2);min-width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-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)}\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", "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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <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      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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;font-family:var(--font-family-sans);text-align:left;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)}.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)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{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)}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;right: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:var(--space-2);min-width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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)}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-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)}\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", "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,
@@ -6134,7 +6156,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      [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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <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      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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--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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear-icon{width:1em;height:1em}.ea-date-picker__popover{display:flex;flex-direction:column;gap:var(--space-2);min-width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-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)}\n"] }]
+                    ], template: "<div class=\"ea-date-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\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-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <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      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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;font-family:var(--font-family-sans);text-align:left;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)}.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)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{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)}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__clear{z-index:1;position:absolute;top:50%;right: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:var(--space-2);min-width:17.5rem;padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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)}.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-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-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)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-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)}\n"] }]
         }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -6147,6 +6169,10 @@ class DialogComponent {
     dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
     i18n = inject(EagamiI18nService);
+    width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `width` instead. Will be removed in v3.0.0.
+     */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
@@ -6158,8 +6184,10 @@ class DialogComponent {
     opened = output();
     /** Fires when the dialog closes (via close button, backdrop, or Escape). */
     closed = output();
+    /** Effective panel width, preferring `width` over the deprecated `size`. */
+    resolvedWidth = computed(() => this.width() ?? this.size(), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
     panelClasses = computed(() => ({
-        [`ea-dialog__panel--${this.size()}`]: true,
+        [`ea-dialog__panel--${this.resolvedWidth()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
@@ -6204,12 +6232,12 @@ class DialogComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--xs{width:20rem}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--xl{width:52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);right:var(--space-3);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-dialog__close>*{font-size:1.25em}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close svg{width:1em;height:1em}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--xs{width:20rem}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--xl{width:52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);right:var(--space-3);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-dialog__close>*{font-size:1.25em}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close svg{width:1em;height:1em}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Side panel backed by the native `<dialog>` element for browser-managed
@@ -6222,6 +6250,10 @@ class DrawerComponent {
     previouslyFocused = null;
     i18n = inject(EagamiI18nService);
     position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `width` instead. Will be removed in v3.0.0.
+     */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
@@ -6233,9 +6265,11 @@ class DrawerComponent {
     opened = output();
     /** Fires when the drawer closes (via close button, backdrop, or Escape). */
     closed = output();
+    /** Effective panel width, preferring `width` over the deprecated `size`. */
+    resolvedWidth = computed(() => this.width() ?? this.size(), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
     panelClasses = computed(() => ({
         [`ea-drawer__panel--${this.position()}`]: true,
-        [`ea-drawer__panel--${this.size()}`]: true,
+        [`ea-drawer__panel--${this.resolvedWidth()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
@@ -6280,12 +6314,12 @@ class DrawerComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--xs{width:16rem}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--xl{width:44rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--xs{width:16rem}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--xl{width:44rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);right:var(--space-3);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-drawer__close>*{font-size:1.25em}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close svg{width:1em;height:1em}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--xs{width:16rem}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--xl{width:44rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--xs{width:16rem}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--xl{width:44rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--xs{height:8rem}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--xl{height:36rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);right:var(--space-3);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-drawer__close>*{font-size:1.25em}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close svg{width:1em;height:1em}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Single-select dropdown with a custom popup list. Supports keyboard
@@ -6442,7 +6476,7 @@ class DropdownComponent {
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-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-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "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", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label(); 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-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:left;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--xs{font-size:var(--font-size-xs)}.ea-dropdown__trigger--sm{font-size:var(--font-size-sm)}.ea-dropdown__trigger--md{font-size:var(--font-size-md)}.ea-dropdown__trigger--lg{font-size:var(--font-size-lg)}.ea-dropdown__trigger--xl{font-size:var(--font-size-xl)}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "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", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -6458,7 +6492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-dropdown-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-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label(); 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-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || resolvedPlaceholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:left;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--xs{font-size:var(--font-size-xs)}.ea-dropdown__trigger--sm{font-size:var(--font-size-sm)}.ea-dropdown__trigger--md{font-size:var(--font-size-md)}.ea-dropdown__trigger--lg{font-size:var(--font-size-lg)}.ea-dropdown__trigger--xl{font-size:var(--font-size-xl)}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
         }], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class EagamiIconComponent extends IconComponentBase {
@@ -6847,27 +6881,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class EagamiWordmarkComponent {
     i18n = inject(EagamiI18nService);
-    /**
-     * The wordmark variant to render. `4` is accepted as a deprecated,
-     * backwards-compatible alias for `3` and renders identically.
-     */
+    /** The wordmark variant to render. */
     variant = input(1, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     size = input(32, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /* Collapse the deprecated `4` alias to `3` once so every downstream computed
-       can switch on `EagamiWordmarkVariant` without re-handling the alias. */
-    resolvedVariant = computed(() => {
-        const v = this.variant();
-        return v === 4 ? 3 : v;
-    }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
-    showOverline = computed(() => this.resolvedVariant() === 2, ...(ngDevMode ? [{ debugName: "showOverline" }] : /* istanbul ignore next */ []));
-    showTagline = computed(() => this.resolvedVariant() === 3, ...(ngDevMode ? [{ debugName: "showTagline" }] : /* istanbul ignore next */ []));
+    showOverline = computed(() => this.variant() === 2, ...(ngDevMode ? [{ debugName: "showOverline" }] : /* istanbul ignore next */ []));
+    showTagline = computed(() => this.variant() === 3, ...(ngDevMode ? [{ debugName: "showTagline" }] : /* istanbul ignore next */ []));
     brandText = computed(() => 'eagami', ...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
     // The brand name itself stays untranslated; only the descriptive overline
     // and tagline localize.
     ariaLabel = computed(() => {
         const messages = this.i18n.messages().wordmark;
-        switch (this.resolvedVariant()) {
+        switch (this.variant()) {
             case 1:
                 return 'eagami';
             case 2:
@@ -6888,24 +6913,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 /**
  * Pattern for "no results" or "nothing here yet" screens. Combines an
- * optional title and description with `[slot=media]` (icon or illustration)
- * and `[slot=actions]` (follow-up buttons) content slots.
+ * optional icon, title, and description with `[slot=media]` (custom
+ * illustration) and `[slot=actions]` (follow-up buttons) content slots.
  */
 class EmptyStateComponent {
     title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     headingLevel = input('h2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    /** Optional icon component rendered in the media area above the title. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Renders a dashed frame around the block. */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-empty-state--${this.size()}`]: true,
+        'ea-empty-state--bordered': this.bordered(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EmptyStateComponent, isStandalone: true, selector: "ea-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-empty-state\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-empty-state__media\">\n    <ng-content select=\"[slot=media]\" />\n  </div>\n\n  @if (title()) {\n    @switch (headingLevel()) {\n      @case ('h2') {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n      @case ('h3') {\n        <h3 class=\"ea-empty-state__title\">{{ title() }}</h3>\n      }\n      @case ('h4') {\n        <h4 class=\"ea-empty-state__title\">{{ title() }}</h4>\n      }\n      @case ('h5') {\n        <h5 class=\"ea-empty-state__title\">{{ title() }}</h5>\n      }\n      @case ('h6') {\n        <h6 class=\"ea-empty-state__title\">{{ title() }}</h6>\n      }\n      @default {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n    }\n  }\n\n  @if (description()) {\n    <p class=\"ea-empty-state__description\">{{ description() }}</p>\n  }\n\n  <div class=\"ea-empty-state__actions\">\n    <ng-content select=\"[slot=actions]\" />\n  </div>\n</div>\n", styles: [".ea-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-empty-state--sm{gap:var(--space-2);padding:var(--space-6) var(--space-4)}.ea-empty-state--sm .ea-empty-state__media{font-size:2rem}.ea-empty-state--sm .ea-empty-state__title{font-size:var(--font-size-md)}.ea-empty-state--sm .ea-empty-state__description{font-size:var(--font-size-sm);max-width:24rem}.ea-empty-state--md{gap:var(--space-3);padding:var(--space-8) var(--space-6)}.ea-empty-state--md .ea-empty-state__media{font-size:3rem}.ea-empty-state--md .ea-empty-state__title{font-size:var(--font-size-lg)}.ea-empty-state--md .ea-empty-state__description{font-size:var(--font-size-md);max-width:32rem}.ea-empty-state--lg{gap:var(--space-4);padding:var(--space-12) var(--space-8)}.ea-empty-state--lg .ea-empty-state__media{font-size:4rem}.ea-empty-state--lg .ea-empty-state__title{font-size:var(--font-size-xl)}.ea-empty-state--lg .ea-empty-state__description{font-size:var(--font-size-md);max-width:36rem}.ea-empty-state__media{display:flex;align-items:center;justify-content:center;color:var(--ea-empty-state-media-color, var(--color-text-tertiary))}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--ea-empty-state-title-font-weight, var(--font-weight-semibold));line-height:var(--line-height-tight);color:var(--ea-empty-state-title-color, var(--color-text-primary))}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);color:var(--ea-empty-state-description-color, var(--color-text-secondary))}.ea-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}.ea-empty-state__actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EmptyStateComponent, isStandalone: true, selector: "ea-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-empty-state\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-empty-state__media\">\n    @if (icon(); as iconComponent) {\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    }\n    <ng-content select=\"[slot=media]\" />\n  </div>\n\n  @if (title()) {\n    @switch (headingLevel()) {\n      @case ('h2') {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n      @case ('h3') {\n        <h3 class=\"ea-empty-state__title\">{{ title() }}</h3>\n      }\n      @case ('h4') {\n        <h4 class=\"ea-empty-state__title\">{{ title() }}</h4>\n      }\n      @case ('h5') {\n        <h5 class=\"ea-empty-state__title\">{{ title() }}</h5>\n      }\n      @case ('h6') {\n        <h6 class=\"ea-empty-state__title\">{{ title() }}</h6>\n      }\n      @default {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n    }\n  }\n\n  @if (description()) {\n    <p class=\"ea-empty-state__description\">{{ description() }}</p>\n  }\n\n  <div class=\"ea-empty-state__actions\">\n    <ng-content select=\"[slot=actions]\" />\n  </div>\n</div>\n", styles: [".ea-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75em;padding:2em 1.5em;text-align:center;font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-empty-state--xs{font-size:var(--font-size-xs)}.ea-empty-state--sm{font-size:var(--font-size-sm)}.ea-empty-state--md{font-size:var(--font-size-md)}.ea-empty-state--lg{font-size:var(--font-size-lg)}.ea-empty-state--xl{font-size:var(--font-size-xl)}.ea-empty-state--bordered{border:var(--border-width-medium) dashed var(--color-border-default);border-radius:var(--radius-xl)}.ea-empty-state__media{display:flex;align-items:center;justify-content:center;font-size:3em;color:var(--ea-empty-state-media-color, var(--color-text-tertiary))}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-size:1.125em;font-weight:var(--ea-empty-state-title-font-weight, var(--font-weight-semibold));line-height:var(--line-height-tight);color:var(--ea-empty-state-title-color, var(--color-text-primary))}.ea-empty-state__description{max-width:32em;margin:0;font-size:1em;line-height:var(--line-height-normal);color:var(--ea-empty-state-description-color, var(--color-text-secondary))}.ea-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;margin-top:.5em}.ea-empty-state__actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\n  class=\"ea-empty-state\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-empty-state__media\">\n    <ng-content select=\"[slot=media]\" />\n  </div>\n\n  @if (title()) {\n    @switch (headingLevel()) {\n      @case ('h2') {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n      @case ('h3') {\n        <h3 class=\"ea-empty-state__title\">{{ title() }}</h3>\n      }\n      @case ('h4') {\n        <h4 class=\"ea-empty-state__title\">{{ title() }}</h4>\n      }\n      @case ('h5') {\n        <h5 class=\"ea-empty-state__title\">{{ title() }}</h5>\n      }\n      @case ('h6') {\n        <h6 class=\"ea-empty-state__title\">{{ title() }}</h6>\n      }\n      @default {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n    }\n  }\n\n  @if (description()) {\n    <p class=\"ea-empty-state__description\">{{ description() }}</p>\n  }\n\n  <div class=\"ea-empty-state__actions\">\n    <ng-content select=\"[slot=actions]\" />\n  </div>\n</div>\n", styles: [".ea-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-empty-state--sm{gap:var(--space-2);padding:var(--space-6) var(--space-4)}.ea-empty-state--sm .ea-empty-state__media{font-size:2rem}.ea-empty-state--sm .ea-empty-state__title{font-size:var(--font-size-md)}.ea-empty-state--sm .ea-empty-state__description{font-size:var(--font-size-sm);max-width:24rem}.ea-empty-state--md{gap:var(--space-3);padding:var(--space-8) var(--space-6)}.ea-empty-state--md .ea-empty-state__media{font-size:3rem}.ea-empty-state--md .ea-empty-state__title{font-size:var(--font-size-lg)}.ea-empty-state--md .ea-empty-state__description{font-size:var(--font-size-md);max-width:32rem}.ea-empty-state--lg{gap:var(--space-4);padding:var(--space-12) var(--space-8)}.ea-empty-state--lg .ea-empty-state__media{font-size:4rem}.ea-empty-state--lg .ea-empty-state__title{font-size:var(--font-size-xl)}.ea-empty-state--lg .ea-empty-state__description{font-size:var(--font-size-md);max-width:36rem}.ea-empty-state__media{display:flex;align-items:center;justify-content:center;color:var(--ea-empty-state-media-color, var(--color-text-tertiary))}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--ea-empty-state-title-font-weight, var(--font-weight-semibold));line-height:var(--line-height-tight);color:var(--ea-empty-state-title-color, var(--color-text-primary))}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);color:var(--ea-empty-state-description-color, var(--color-text-secondary))}.ea-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}.ea-empty-state__actions:empty{display:none}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+            args: [{ selector: 'ea-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgComponentOutlet], template: "<div\n  class=\"ea-empty-state\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-empty-state__media\">\n    @if (icon(); as iconComponent) {\n      <ng-container *ngComponentOutlet=\"iconComponent\" />\n    }\n    <ng-content select=\"[slot=media]\" />\n  </div>\n\n  @if (title()) {\n    @switch (headingLevel()) {\n      @case ('h2') {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n      @case ('h3') {\n        <h3 class=\"ea-empty-state__title\">{{ title() }}</h3>\n      }\n      @case ('h4') {\n        <h4 class=\"ea-empty-state__title\">{{ title() }}</h4>\n      }\n      @case ('h5') {\n        <h5 class=\"ea-empty-state__title\">{{ title() }}</h5>\n      }\n      @case ('h6') {\n        <h6 class=\"ea-empty-state__title\">{{ title() }}</h6>\n      }\n      @default {\n        <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\n      }\n    }\n  }\n\n  @if (description()) {\n    <p class=\"ea-empty-state__description\">{{ description() }}</p>\n  }\n\n  <div class=\"ea-empty-state__actions\">\n    <ng-content select=\"[slot=actions]\" />\n  </div>\n</div>\n", styles: [".ea-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75em;padding:2em 1.5em;text-align:center;font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-empty-state--xs{font-size:var(--font-size-xs)}.ea-empty-state--sm{font-size:var(--font-size-sm)}.ea-empty-state--md{font-size:var(--font-size-md)}.ea-empty-state--lg{font-size:var(--font-size-lg)}.ea-empty-state--xl{font-size:var(--font-size-xl)}.ea-empty-state--bordered{border:var(--border-width-medium) dashed var(--color-border-default);border-radius:var(--radius-xl)}.ea-empty-state__media{display:flex;align-items:center;justify-content:center;font-size:3em;color:var(--ea-empty-state-media-color, var(--color-text-tertiary))}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-size:1.125em;font-weight:var(--ea-empty-state-title-font-weight, var(--font-weight-semibold));line-height:var(--line-height-tight);color:var(--ea-empty-state-title-color, var(--color-text-primary))}.ea-empty-state__description{max-width:32em;margin:0;font-size:1em;line-height:var(--line-height-normal);color:var(--ea-empty-state-description-color, var(--color-text-secondary))}.ea-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;margin-top:.5em}.ea-empty-state__actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
 
 class ArchiveIconComponent extends IconComponentBase {
     static slug = 'archive';
@@ -7723,7 +7753,7 @@ class FileUploaderComponent {
                 useExisting: forwardRef(() => FileUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [attr.required]=\"required() ? true : null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [title]=\"file.name\">\n              {{ file.name }}\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              {{ formatBytes(file.size) }}\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-6);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:40px;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:20px;height:20px;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:var(--space-0-5);flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:var(--font-size-sm);text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width .2s ease-out}.ea-file-uploader-field__remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--color-text-tertiary);border:none;border-radius:var(--radius-md);background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove:hover:not(:disabled){background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:16px;height:16px}.ea-file-uploader-field--sm .ea-file-uploader-field__dropzone{gap:var(--space-1);padding:var(--space-3);font-size:var(--font-size-xs)}.ea-file-uploader-field--sm .ea-file-uploader-field__upload-icon{font-size:28px}.ea-file-uploader-field--sm .ea-file-uploader-field__item{padding:var(--space-1) var(--space-2)}.ea-file-uploader-field--sm .ea-file-uploader-field__type-icon{width:16px;height:16px}.ea-file-uploader-field--sm .ea-file-uploader-field__remove{width:24px;height:24px}.ea-file-uploader-field--lg .ea-file-uploader-field__dropzone{gap:var(--space-3);padding:var(--space-8);font-size:var(--font-size-md)}.ea-file-uploader-field--lg .ea-file-uploader-field__upload-icon{font-size:48px}.ea-file-uploader-field--lg .ea-file-uploader-field__item{padding:var(--space-3) var(--space-4)}.ea-file-uploader-field--lg .ea-file-uploader-field__type-icon{width:24px;height:24px}.ea-file-uploader-field--lg .ea-file-uploader-field__remove{width:32px;height:32px}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { 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: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [attr.required]=\"required() ? true : null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [title]=\"file.name\">\n              {{ file.name }}\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              {{ formatBytes(file.size) }}\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width .2s ease-out}.ea-file-uploader-field__remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { 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: FileUploaderComponent, decorators: [{
             type: Component,
@@ -7745,7 +7775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => FileUploaderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [attr.required]=\"required() ? true : null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [title]=\"file.name\">\n              {{ file.name }}\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              {{ formatBytes(file.size) }}\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-6);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:40px;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:20px;height:20px;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:var(--space-0-5);flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:var(--font-size-sm);text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width .2s ease-out}.ea-file-uploader-field__remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--color-text-tertiary);border:none;border-radius:var(--radius-md);background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove:hover:not(:disabled){background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:16px;height:16px}.ea-file-uploader-field--sm .ea-file-uploader-field__dropzone{gap:var(--space-1);padding:var(--space-3);font-size:var(--font-size-xs)}.ea-file-uploader-field--sm .ea-file-uploader-field__upload-icon{font-size:28px}.ea-file-uploader-field--sm .ea-file-uploader-field__item{padding:var(--space-1) var(--space-2)}.ea-file-uploader-field--sm .ea-file-uploader-field__type-icon{width:16px;height:16px}.ea-file-uploader-field--sm .ea-file-uploader-field__remove{width:24px;height:24px}.ea-file-uploader-field--lg .ea-file-uploader-field__dropzone{gap:var(--space-3);padding:var(--space-8);font-size:var(--font-size-md)}.ea-file-uploader-field--lg .ea-file-uploader-field__upload-icon{font-size:48px}.ea-file-uploader-field--lg .ea-file-uploader-field__item{padding:var(--space-3) var(--space-4)}.ea-file-uploader-field--lg .ea-file-uploader-field__type-icon{width:24px;height:24px}.ea-file-uploader-field--lg .ea-file-uploader-field__remove{width:32px;height:32px}\n"] }]
+                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [attr.required]=\"required() ? true : null\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [title]=\"file.name\">\n              {{ file.name }}\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              {{ formatBytes(file.size) }}\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width .2s ease-out}.ea-file-uploader-field__remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
         }], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", 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"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
 const ARCHIVE_MIMES = new Set([
     'application/zip',
@@ -7961,6 +7991,8 @@ class InputComponent {
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Placeholder shown while the field is empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Leading icon component rendered before the text, e.g. a search or filter glyph. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* 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. */
@@ -8060,13 +8092,13 @@ class InputComponent {
         this.inputEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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", focused: "focused", blurred: "blurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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", focused: "focused", blurred: "blurred" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"clear($event)\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem;font-size:var(--font-size-sm)}.ea-input-wrapper--sm .ea-input{padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem;font-size:var(--font-size-md)}.ea-input-wrapper--md .ea-input{padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem;font-size:var(--font-size-lg)}.ea-input-wrapper--lg .ea-input{padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__clear-icon{width:1em;height:1em}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { 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: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"clear($event)\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__clear-icon{width:1em;height:1em}.ea-input-wrapper__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { 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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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: InputComponent, decorators: [{
             type: Component,
@@ -8076,6 +8108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         FieldLabelComponent,
                         FieldMessagesComponent,
                         NgClass,
+                        NgComponentOutlet,
                         XIconComponent,
                     ], providers: [
                         {
@@ -8083,8 +8116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-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-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"clear($event)\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem;font-size:var(--font-size-sm)}.ea-input-wrapper--sm .ea-input{padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem;font-size:var(--font-size-md)}.ea-input-wrapper--md .ea-input{padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem;font-size:var(--font-size-lg)}.ea-input-wrapper--lg .ea-input{padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__clear-icon{width:1em;height:1em}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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"] }] } });
+                    ], template: "<div class=\"ea-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-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"clear($event)\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__clear-icon{width:1em;height:1em}.ea-input-wrapper__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 /**
  * Popup action menu attached to any focusable element via the
@@ -8331,11 +8364,11 @@ class TagComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{width:1em;height:1em;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
+            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{width:1em;height:1em;pointer-events:none}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
@@ -8646,7 +8679,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n  @if (label(); 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-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\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              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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,.ea-multi-select__trigger-wrapper{position:relative}.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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--sm{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-multi-select__trigger--md{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-multi-select__trigger--lg{padding:var(--space-2) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:absolute;top:50%;right:calc(1em + var(--space-5));z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.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(--color-bg-elevated)}.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__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;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)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}.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"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "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", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n  @if (label(); 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-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\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              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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,.ea-multi-select__trigger-wrapper{position:relative}.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{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;text-align:left;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-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger--md{font-size:var(--font-size-md)}.ea-multi-select__trigger--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.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)}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{z-index:1;position:absolute;top:50%;right:calc(1em + var(--space-5));transform:translateY(-50%)}.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(--color-bg-elevated)}.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;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)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}.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"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "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", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -8666,7 +8699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true,
                         },
-                    ], 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-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\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              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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,.ea-multi-select__trigger-wrapper{position:relative}.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{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--sm{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-multi-select__trigger--md{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-multi-select__trigger--lg{padding:var(--space-2) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:absolute;top:50%;right:calc(1em + var(--space-5));z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.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(--color-bg-elevated)}.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__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;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)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}.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"] }]
+                    ], 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-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              {{ resolvedPlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                {{ opt.label }}\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n        <ea-icon-chevron-down\n          class=\"ea-multi-select__trigger-icon\"\n          aria-hidden=\"true\" />\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\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              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        @if (selectAll() && filteredOptions().length > 0) {\n          <div\n            class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n            (click)=\"toggleSelectAll()\">\n            <ea-checkbox\n              size=\"sm\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              [ariaLabel]=\"i18n.messages().multiSelect.selectAll\" />\n            <span class=\"ea-multi-select__option-label\">\n              {{ i18n.messages().multiSelect.selectAll }}\n            </span>\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"presentation\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === i\"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"toggleOption(opt)\"\n              (keydown)=\"handlePopoverKeydown($event)\">\n              <ea-checkbox\n                size=\"sm\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\"\n                [ariaLabel]=\"opt.label\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          } @empty {\n            <li class=\"ea-multi-select__empty\">\n              {{ i18n.messages().multiSelect.searchEmpty }}\n            </li>\n          }\n        </ul>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\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,.ea-multi-select__trigger-wrapper{position:relative}.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{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;text-align:left;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-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger--md{font-size:var(--font-size-md)}.ea-multi-select__trigger--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-multi-select__trigger--error{border-color:var(--color-error-default)}.ea-multi-select__trigger--error.ea-multi-select__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-multi-select__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);flex:1;min-width:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger--open .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.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)}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{z-index:1;position:absolute;top:50%;right:calc(1em + var(--space-5));transform:translateY(-50%)}.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(--color-bg-elevated)}.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;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)}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}.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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -8751,11 +8784,11 @@ class PaginatorComponent {
         this.changed.emit({ page: 1, pageSize: newSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
+            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ i18n.messages().paginator.range(rangeStart(), rangeEnd(), totalItems()) }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -8770,8 +8803,15 @@ class ProgressBarComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Shows the rounded percentage alongside the label. */
+    showPercentage = input(false, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `showPercentage` instead. Will be removed in v3.0.0.
+     */
     showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Whether to render the percentage (honours the deprecated `showValue` alias). */
+    showsPercentage = computed(() => this.showPercentage() || this.showValue(), ...(ngDevMode ? [{ debugName: "showsPercentage" }] : /* istanbul ignore next */ []));
     percentage = computed(() => {
         const max = this.max();
         if (max <= 0) {
@@ -8786,12 +8826,12 @@ class ProgressBarComponent {
         'ea-progress-bar--indeterminate': this.indeterminate(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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 }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-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;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showsPercentage()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--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(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.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() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-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;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+            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\">{{ label() }}</span>\n      }\n      @if (showsPercentage() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || i18n.messages().progressBar.label\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar--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(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 /**
  * Composite single-select control made up of `ea-radio` children. Manages
@@ -8888,11 +8928,11 @@ class RadioComponent {
         this.group.select(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 } }, ngImport: i0, template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\">\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-md);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-lg);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 } }, ngImport: i0, template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\">\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--xs{font-size:var(--font-size-xs)}.ea-radio--sm{font-size:var(--font-size-sm)}.ea-radio--md{font-size:var(--font-size-md)}.ea-radio--lg{font-size:var(--font-size-lg)}.ea-radio--xl{font-size:var(--font-size-xl)}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{line-height:1.25em;font-weight:var(--font-weight-regular)}\n"], dependencies: [{ 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: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\">\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-md);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-lg);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
+            args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\">\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--xs{font-size:var(--font-size-xs)}.ea-radio--sm{font-size:var(--font-size-sm)}.ea-radio--md{font-size:var(--font-size-md)}.ea-radio--lg{font-size:var(--font-size-lg)}.ea-radio--xl{font-size:var(--font-size-xl)}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{line-height:1.25em;font-weight:var(--font-weight-regular)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
@@ -9093,7 +9133,7 @@ class RangeSliderComponent {
                 useExisting: forwardRef(() => RangeSliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <div class=\"ea-range-slider-field__header\">\n      <ea-field-label\n        [text]=\"labelText\"\n        [labelId]=\"id() + '-label'\"\n        [required]=\"required()\" />\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-range-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--sm .ea-range-slider .ea-range-slider__track{height:.25rem}.ea-range-slider--sm .ea-range-slider .ea-range-slider__thumb{width:.875rem;height:.875rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__track{height:.375rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__thumb{width:1.125rem;height:1.125rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__track{height:.5rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__thumb{width:1.375rem;height:1.375rem}.ea-range-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "component", type: 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 });
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-range-slider-field__value{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "component", type: 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: RangeSliderComponent, decorators: [{
             type: Component,
@@ -9103,7 +9143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => RangeSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <div class=\"ea-range-slider-field__header\">\n      <ea-field-label\n        [text]=\"labelText\"\n        [labelId]=\"id() + '-label'\"\n        [required]=\"required()\" />\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-range-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--sm .ea-range-slider .ea-range-slider__track{height:.25rem}.ea-range-slider--sm .ea-range-slider .ea-range-slider__thumb{width:.875rem;height:.875rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__track{height:.375rem}.ea-range-slider--md .ea-range-slider .ea-range-slider__thumb{width:1.125rem;height:1.125rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__track{height:.5rem}.ea-range-slider--lg .ea-range-slider .ea-range-slider__thumb{width:1.375rem;height:1.375rem}.ea-range-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+                    ], template: "<div\n  class=\"ea-range-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-range-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-range-slider-field__value\">\n          {{ formatValue()(clampedValue()[0]) }} \u2013 {{ formatValue()(clampedValue()[1]) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-range-slider\">\n    <div\n      #trackEl\n      class=\"ea-range-slider__track\"\n      (pointerdown)=\"handleTrackPointerDown($event)\"\n      (pointermove)=\"handleTrackPointerMove($event)\"\n      (pointerup)=\"handleTrackPointerUp($event)\"\n      (pointercancel)=\"handleTrackPointerUp($event)\">\n      <div\n        class=\"ea-range-slider__fill\"\n        [style.left.%]=\"lowPercent()\"\n        [style.right.%]=\"100 - highPercent()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--low\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-low'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelLow() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"clampedValue()[1]\"\n        [attr.aria-valuenow]=\"clampedValue()[0]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[0])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"lowPercent()\"\n        (keydown)=\"handleKeydown($event, 'low')\"\n        (blur)=\"handleBlur()\">\n      </div>\n      <div\n        class=\"ea-range-slider__thumb ea-range-slider__thumb--high\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id() + '-high'\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabelHigh() ?? null) : null\"\n        [attr.aria-valuemin]=\"clampedValue()[0]\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()[1]\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue()[1])\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"highPercent()\"\n        (keydown)=\"handleKeydown($event, 'high')\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-range-slider__minmax\">\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(min()) }}\n        </span>\n        <span class=\"ea-range-slider__minmax-label\">\n          {{ formatValue()(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-range-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-range-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-range-slider-field__value{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-range-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-range-slider--xs .ea-range-slider{--ea-range-slider-size: .625rem}.ea-range-slider--sm .ea-range-slider{--ea-range-slider-size: .875rem}.ea-range-slider--md .ea-range-slider{--ea-range-slider-size: 1.125rem}.ea-range-slider--lg .ea-range-slider{--ea-range-slider-size: 1.375rem}.ea-range-slider--xl .ea-range-slider{--ea-range-slider-size: 1.625rem}.ea-range-slider__track{position:relative;width:100%;height:calc(var(--ea-range-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-range-slider__fill{position:absolute;top:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-range-slider__thumb{position:absolute;top:50%;width:var(--ea-range-slider-size, 1.125rem);height:var(--ea-range-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-range-slider__thumb:focus-visible{z-index:1;box-shadow:var(--shadow-focus-ring);outline:none}.ea-range-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-range-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-range-slider--dragging .ea-range-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-range-slider--disabled{opacity:.5;cursor:not-allowed}.ea-range-slider--disabled .ea-range-slider__track,.ea-range-slider--disabled .ea-range-slider__thumb{cursor:not-allowed}.ea-range-slider--error .ea-range-slider__fill{background-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb{border-color:var(--color-error-default)}.ea-range-slider--error .ea-range-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
         }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-low", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-high", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class LeftHalfStarIconComponent extends IconComponentBase {
@@ -9453,7 +9493,7 @@ class RatingComponent {
                 useExisting: forwardRef(() => RatingComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "starsEl", first: true, predicate: ["starsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5rem;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;left:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default))}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--sm .ea-rating-field__star{font-size:1.125rem}.ea-rating-field--lg .ea-rating-field__star{font-size:2.25rem}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ 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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "starsEl", first: true, predicate: ["starsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;left:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default))}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ 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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
@@ -9463,7 +9503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => RatingComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5rem;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;left:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default))}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--sm .ea-rating-field__star{font-size:1.125rem}.ea-rating-field--lg .ea-rating-field__star{font-size:2.25rem}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+                    ], template: "<div\n  class=\"ea-rating-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #starsEl\n    class=\"ea-rating-field__stars\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"starAriaLabel(value())\"\n    [attr.aria-readonly]=\"readonly() ? true : null\"\n    [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (pointerleave)=\"onPointerLeave()\">\n    @for (pos of positions(); track pos) {\n      <!--\n        Stars are presentational click targets. The parent\n        `<div role=\"slider\">` is the canonical interactive element (keyboard\n        and AT navigation flows through it); using `<button>` here would\n        nest two interactive controls and trip axe's `nested-interactive`.\n      -->\n      <span\n        role=\"presentation\"\n        class=\"ea-rating-field__star\"\n        [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n        [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n        [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n        [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n        (pointermove)=\"onPointerMove($event, pos)\"\n        (click)=\"onClick($event, pos)\">\n        <!--\n          Background layer is always rendered as the dim full-star outline so\n          empty positions show a visible silhouette and half positions reveal\n          the unfilled side behind the foreground. Thinner stroke keeps the\n          outline visually quiet against the filled foreground.\n        -->\n        <span\n          class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"iconClass(); inputs: { strokeWidth: 1.5 }\" />\n        </span>\n        @if (stateFor(pos) !== 'empty') {\n          <span\n            class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n            aria-hidden=\"true\">\n            <ng-container\n              *ngComponentOutlet=\"\n                stateFor(pos) === 'half' ? halfIconClass() : iconClass()\n              \" />\n          </span>\n        }\n      </span>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;left:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default))}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { starsEl: [{ type: i0.ViewChild, args: ['starsEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowHalf: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHalf", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], halfIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "halfIconClass", 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"] }], hoverChanged: [{ type: i0.Output, args: ["hoverChanged"] }] } });
 
 /**
@@ -9592,7 +9632,7 @@ class SegmentedComponent {
                 useExisting: forwardRef(() => SegmentedComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-segmented-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-lg)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: 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 });
+        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-segmented-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--xs .ea-segmented__option{font-size:var(--font-size-xs)}.ea-segmented--sm .ea-segmented__option{font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{font-size:var(--font-size-lg)}.ea-segmented--xl .ea-segmented__option{font-size:var(--font-size-xl)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: 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: SegmentedComponent, decorators: [{
             type: Component,
@@ -9602,7 +9642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => SegmentedComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-segmented-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-lg)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"ea-segmented-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented{display:inline-flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--xs .ea-segmented__option{font-size:var(--font-size-xs)}.ea-segmented--sm .ea-segmented__option{font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{font-size:var(--font-size-lg)}.ea-segmented--xl .ea-segmented__option{font-size:var(--font-size-xl)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-height:2.25em;padding:.375em .75em;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-state-active)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { buttonEls: [{ type: i0.ViewChildren, args: ['optionEl', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -9769,7 +9809,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <div class=\"ea-slider-field__header\">\n      <ea-field-label\n        [text]=\"labelText\"\n        [labelId]=\"id() + '-label'\"\n        [required]=\"required()\" />\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "component", type: 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 });
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-slider-field__value{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "component", type: 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: SliderComponent, decorators: [{
             type: Component,
@@ -9779,7 +9819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <div class=\"ea-slider-field__header\">\n      <ea-field-label\n        [text]=\"labelText\"\n        [labelId]=\"id() + '-label'\"\n        [required]=\"required()\" />\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}.ea-slider-field__value{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
         }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -9797,11 +9837,11 @@ class SpinnerComponent {
         [`ea-spinner--${this.size()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-text)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-text)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-text)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-text)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -9943,11 +9983,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    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <div class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </div>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper__list{display:flex;align-items:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--sm .ea-stepper__circle{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-stepper--sm .ea-stepper__label{font-size:var(--font-size-xs)}.ea-stepper--lg .ea-stepper__circle{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-stepper--lg .ea-stepper__label{font-size:var(--font-size-md)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <div class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </div>\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:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--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    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <div class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </div>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper__list{display:flex;align-items:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--sm .ea-stepper__circle{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-stepper--sm .ea-stepper__label{font-size:var(--font-size-xs)}.ea-stepper--lg .ea-stepper__circle{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-stepper--lg .ea-stepper__label{font-size:var(--font-size-md)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
+            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    (keydown)=\"handleKeydown($event)\">\n    @for (step of registeredSteps(); let i = $index; track step) {\n      <div class=\"ea-stepper__item\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"ea-stepper__button\"\n          [class.ea-stepper__button--active]=\"i === activeStep()\"\n          [class.ea-stepper__button--completed]=\"step.completed()\"\n          [id]=\"step.id() + '-tab'\"\n          [attr.aria-controls]=\"step.id() + '-panel'\"\n          [attr.aria-selected]=\"i === activeStep()\"\n          [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n          [disabled]=\"!canNavigateTo(i)\"\n          [tabindex]=\"i === activeStep() ? 0 : -1\"\n          (click)=\"selectStep(i)\">\n          <span\n            class=\"ea-stepper__circle\"\n            aria-hidden=\"true\">\n            @if (step.completed()) {\n              <ea-icon-check />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"ea-stepper__label\">\n            {{ step.label() }}\n            @if (step.optional()) {\n              <span class=\"ea-stepper__optional\">\n                ({{ i18n.messages().stepper.optional }})\n              </span>\n            }\n          </span>\n        </button>\n        @if (i < registeredSteps().length - 1) {\n          <span\n            class=\"ea-stepper__connector\"\n            [class.ea-stepper__connector--completed]=\"step.completed()\"\n            aria-hidden=\"true\">\n          </span>\n        }\n      </div>\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:stretch;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__item{display:flex;align-items:center;flex:1;min-width:0}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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,.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:left;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);margin:0 var(--space-2);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}.ea-stepper--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"] }] } });
 
 /**
@@ -10063,7 +10103,7 @@ class SwitchComponent {
                 useExisting: forwardRef(() => SwitchComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-lg)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--xs{--ea-switch-size: .75rem}.ea-switch--sm{--ea-switch-size: 1rem}.ea-switch--md{--ea-switch-size: 1.25rem}.ea-switch--lg{--ea-switch-size: 1.5rem}.ea-switch--xl{--ea-switch-size: 1.75rem}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25rem) * 1.8);height:var(--ea-switch-size, 1.25rem);padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25rem) * .8);height:calc(var(--ea-switch-size, 1.25rem) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-size:calc(var(--ea-switch-size, 1.25rem) * .8);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -10073,7 +10113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => SwitchComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-lg)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
+                    ], template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--xs{--ea-switch-size: .75rem}.ea-switch--sm{--ea-switch-size: 1rem}.ea-switch--md{--ea-switch-size: 1.25rem}.ea-switch--lg{--ea-switch-size: 1.5rem}.ea-switch--xl{--ea-switch-size: 1.75rem}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;width:calc(var(--ea-switch-size, 1.25rem) * 1.8);height:var(--ea-switch-size, 1.25rem);padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--ea-switch-track-border-color, var(--color-border-default));border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;width:calc(var(--ea-switch-size, 1.25rem) * .8);height:calc(var(--ea-switch-size, 1.25rem) * .8);background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-size:calc(var(--ea-switch-size, 1.25rem) * .8);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -10130,11 +10170,11 @@ class TabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabsComponent, isStandalone: true, selector: "ea-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", changed: "changed" }, ngImport: i0, template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n    [class.ea-tabs__list--md]=\"size() === 'md'\"\n    [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--sm .ea-tabs__trigger{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs)}.ea-tabs__list--md .ea-tabs__trigger{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.ea-tabs__list--lg .ea-tabs__trigger{padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-md)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabsComponent, isStandalone: true, selector: "ea-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", changed: "changed" }, ngImport: i0, template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n    [class.ea-tabs__list--md]=\"size() === 'md'\"\n    [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--xs .ea-tabs__trigger{font-size:var(--font-size-xs)}.ea-tabs__list--sm .ea-tabs__trigger{font-size:var(--font-size-sm)}.ea-tabs__list--md .ea-tabs__trigger{font-size:var(--font-size-md)}.ea-tabs__list--lg .ea-tabs__trigger{font-size:var(--font-size-lg)}.ea-tabs__list--xl .ea-tabs__trigger{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n    [class.ea-tabs__list--md]=\"size() === 'md'\"\n    [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--sm .ea-tabs__trigger{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs)}.ea-tabs__list--md .ea-tabs__trigger{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.ea-tabs__list--lg .ea-tabs__trigger{padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-md)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'ea-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ea-tabs\">\n  <div\n    class=\"ea-tabs__list\"\n    [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n    [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n    [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n    [class.ea-tabs__list--md]=\"size() === 'md'\"\n    [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n    role=\"tablist\"\n    (keydown)=\"handleKeydown($event)\">\n    @for (tab of registeredTabs(); track tab.value()) {\n      <button\n        class=\"ea-tabs__trigger\"\n        [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id() + '-tab'\"\n        [attr.aria-selected]=\"tab.isActive()\"\n        [attr.aria-controls]=\"tab.id() + '-panel'\"\n        [disabled]=\"tab.disabled()\"\n        [tabindex]=\"tab.isActive() ? 0 : -1\"\n        (click)=\"selectTab(tab.value())\">\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-brand-text);color:var(--color-brand-text)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--xs .ea-tabs__trigger{font-size:var(--font-size-xs)}.ea-tabs__list--sm .ea-tabs__trigger{font-size:var(--font-size-sm)}.ea-tabs__list--md .ea-tabs__trigger{font-size:var(--font-size-md)}.ea-tabs__list--lg .ea-tabs__trigger{font-size:var(--font-size-lg)}.ea-tabs__list--xl .ea-tabs__trigger{font-size:var(--font-size-xl)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:.5em 1em;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
@@ -10205,12 +10245,19 @@ class TextareaComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `maxHeight` and the `resize` handle to control height; this
+     * sets the initial height only. Will be removed in v3.0.0.
+     */
     rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
     maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
     /** Optional pixel ceiling for the textarea's height. Beyond it, the inner
      * field scrolls vertically instead of growing. */
     maxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** Optional pixel floor for the textarea's height. Clamped so it never drops
+     * below the height implied by `rows`. */
+    minHeight = input(undefined, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
     id = input(uniqueId('ea-textarea'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
@@ -10232,6 +10279,15 @@ class TextareaComponent {
         'ea-textarea-wrapper--disabled': this.isDisabled(),
         'ea-textarea-wrapper--readonly': this.readonly(),
     }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    // Drive the visible height from `rows` directly (as a flex item the native
+    // `rows` attribute gets collapsed): an em-based min-height of `rows` lines plus
+    // padding keeps it proportional to the size. A consumer `minHeight` (px) raises
+    // the floor but can never shrink it below that calculated value.
+    minHeightStyle = computed(() => {
+        const rowsHeight = `calc(${this.rows()} * var(--line-height-normal) * 1em + 0.75em * 2)`;
+        const px = this.minHeight();
+        return px && px > 0 ? `max(${rowsHeight}, ${px}px)` : rowsHeight;
+    }, ...(ngDevMode ? [{ debugName: "minHeightStyle" }] : /* istanbul ignore next */ []));
     writeValue(val) {
         this.value.set(val ?? '');
     }
@@ -10263,13 +10319,13 @@ class TextareaComponent {
         this.textareaEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", 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 }, 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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", focused: "focused", blurred: "blurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", 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 }, 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", 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", focused: "focused", blurred: "blurred" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label(); 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    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [style.max-height.px]=\"maxHeight() ?? null\"\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]=\"showError() ? errorMsg() : null\"\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;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{min-height:calc(1.5em + var(--space-2) * 2);padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{min-height:calc(1.5em + var(--space-3) * 2);padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{min-height:calc(1.5em + var(--space-4) * 2);padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: 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 });
+        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, 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      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\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]=\"showError() ? errorMsg() : null\"\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)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;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"], dependencies: [{ 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: TextareaComponent, decorators: [{
             type: Component,
@@ -10279,8 +10335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], 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    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [style.max-height.px]=\"maxHeight() ?? null\"\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]=\"showError() ? errorMsg() : null\"\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;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{min-height:calc(1.5em + var(--space-2) * 2);padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{min-height:calc(1.5em + var(--space-3) * 2);padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{min-height:calc(1.5em + var(--space-4) * 2);padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
-        }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", 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"] }] } });
+                    ], 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      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\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]=\"showError() ? errorMsg() : null\"\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)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], 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';
@@ -10845,7 +10901,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-time-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-time-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear-icon{width:1em;height:1em}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:.875em;height:.875em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { 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", "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: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:left;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;right:var(--space-2);transform:translateY(-50%)}.ea-time-picker__clear-icon{width:1em;height:1em}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25rem;height:1.75rem}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { 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", "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: TimePickerComponent, decorators: [{
             type: Component,
@@ -10864,7 +10920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-time-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-md);min-height:2.5rem}.ea-time-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-lg);min-height:3rem}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear-icon{width:1em;height:1em}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:.875em;height:.875em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"] }]
+                    ], template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          {{ displayValue() || resolvedPlaceholder() }}\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div class=\"ea-time-picker__popover\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"showError() ? errorMsg() : null\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:left;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;right:var(--space-2);transform:translateY(-50%)}.ea-time-picker__clear-icon{width:1em;height:1em}.ea-time-picker__popover{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-elevated)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}.ea-time-picker__step{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25rem;height:1.75rem}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25rem;height:2.25rem;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring);background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:var(--space-1);margin-left:var(--space-1)}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;padding:var(--space-1) var(--space-2);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }], secondsEl: [{ type: i0.ViewChild, args: ['secondsEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], includeSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 /** Delay before a held chevron button starts repeating, in ms. */
 const HOLD_INITIAL_DELAY = 400;
@@ -10985,11 +11041,11 @@ class ToastComponent {
         return toast.variant === 'error' || toast.variant === 'warning' ? 'alert' : 'status';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}.ea-toast__close ea-icon-x{width:1em;height:1em}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
+            args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--color-bg-elevated);background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}.ea-toast__close ea-icon-x{width:1em;height:1em}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
         }] });
 
 class ChevronsLeftIconComponent extends IconComponentBase {
@@ -11303,7 +11359,7 @@ class TransferListComponent {
         this.rightHighlighted.set(new Set());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", 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 } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:160px;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong);background-color:var(--color-state-hover)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__button:disabled{opacity:.4;cursor:not-allowed}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--sm .ea-transfer-list__list{min-height:120px}.ea-transfer-list--sm .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--lg .ea-transfer-list__list{min-height:200px}.ea-transfer-list--lg .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--lg .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", 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 } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:160px;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong);background-color:var(--color-state-hover)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__button:disabled{opacity:.4;cursor:not-allowed}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--xs .ea-transfer-list__list{min-height:120px}.ea-transfer-list--xs .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--sm .ea-transfer-list__list{min-height:120px}.ea-transfer-list--sm .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--lg .ea-transfer-list__list{min-height:200px}.ea-transfer-list--lg .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--lg .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--xl .ea-transfer-list__list{min-height:200px}.ea-transfer-list--xl .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--xl .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TransferListComponent, decorators: [{
             type: Component,
@@ -11312,7 +11368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         ChevronRightIconComponent,
                         ChevronsLeftIconComponent,
                         ChevronsRightIconComponent,
-                    ], template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:160px;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong);background-color:var(--color-state-hover)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__button:disabled{opacity:.4;cursor:not-allowed}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--sm .ea-transfer-list__list{min-height:120px}.ea-transfer-list--sm .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--lg .ea-transfer-list__list{min-height:200px}.ea-transfer-list--lg .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--lg .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"] }]
+                    ], template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"item.disabled || disabled() ? -1 : 0\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:160px;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong);background-color:var(--color-state-hover)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-transfer-list__button:disabled{opacity:.4;cursor:not-allowed}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--xs .ea-transfer-list__list{min-height:120px}.ea-transfer-list--xs .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--sm .ea-transfer-list__list{min-height:120px}.ea-transfer-list--sm .ea-transfer-list__item{padding:var(--space-1) var(--space-2)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--lg .ea-transfer-list__list{min-height:200px}.ea-transfer-list--lg .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--lg .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--xl .ea-transfer-list__list{min-height:200px}.ea-transfer-list--xl .ea-transfer-list__item{padding:var(--space-2) var(--space-4)}.ea-transfer-list--xl .ea-transfer-list__button{width:2.25rem;height:2.25rem}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
@@ -11650,11 +11706,11 @@ class TreeComponent {
     // focus behaviour (e.g. focusing the tree from a parent component).
     _listEl = this.listEl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TreeComponent, isStandalone: true, selector: "ea-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", expandedIds: "expandedIdsChange", nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #listEl\n  class=\"ea-tree__list\"\n  [class]=\"hostClasses()\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (focusin)=\"onTreeFocus($event)\">\n  @for (root of nodes(); track root.id; let i = $index) {\n    <ea-tree-node\n      [node]=\"root\"\n      [level]=\"0\"\n      [posInSet]=\"i + 1\"\n      [setSize]=\"nodes().length\"\n      [selectedId]=\"selectedId()\"\n      [focusedId]=\"focusedId()\"\n      [expandedIds]=\"expandedSet()\"\n      [disabled]=\"disabled()\"\n      [expandLabel]=\"messages().tree.expand\"\n      [collapseLabel]=\"messages().tree.collapse\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\" />\n  }\n</ul>\n", styles: [":host{display:block}.ea-tree__list{display:block;padding:0;margin:0;border-radius:var(--radius-md);background-color:var(--ea-tree-background-color, transparent);color:var(--color-text-primary);list-style:none}.ea-tree__list:focus-visible{outline:none}.ea-tree--sm{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-sm)}.ea-tree--md{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-md)}.ea-tree--lg{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-lg)}.ea-tree--disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ea-tree-node", inputs: ["node", "level", "posInSet", "setSize", "selectedId", "focusedId", "expandedIds", "disabled", "expandLabel", "collapseLabel"], outputs: ["toggle", "select"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TreeComponent, isStandalone: true, selector: "ea-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", expandedIds: "expandedIdsChange", nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #listEl\n  class=\"ea-tree__list\"\n  [class]=\"hostClasses()\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (focusin)=\"onTreeFocus($event)\">\n  @for (root of nodes(); track root.id; let i = $index) {\n    <ea-tree-node\n      [node]=\"root\"\n      [level]=\"0\"\n      [posInSet]=\"i + 1\"\n      [setSize]=\"nodes().length\"\n      [selectedId]=\"selectedId()\"\n      [focusedId]=\"focusedId()\"\n      [expandedIds]=\"expandedSet()\"\n      [disabled]=\"disabled()\"\n      [expandLabel]=\"messages().tree.expand\"\n      [collapseLabel]=\"messages().tree.collapse\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\" />\n  }\n</ul>\n", styles: [":host{display:block}.ea-tree__list{display:block;padding:0;margin:0;border-radius:var(--radius-md);background-color:var(--ea-tree-background-color, transparent);color:var(--color-text-primary);list-style:none}.ea-tree__list:focus-visible{outline:none}.ea-tree--xs{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-xs)}.ea-tree--sm{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-sm)}.ea-tree--md{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-md)}.ea-tree--lg{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-lg)}.ea-tree--xl{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-xl)}.ea-tree--disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ea-tree-node", inputs: ["node", "level", "posInSet", "setSize", "selectedId", "focusedId", "expandedIds", "disabled", "expandLabel", "collapseLabel"], outputs: ["toggle", "select"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TreeNodeComponent], template: "<ul\n  #listEl\n  class=\"ea-tree__list\"\n  [class]=\"hostClasses()\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (focusin)=\"onTreeFocus($event)\">\n  @for (root of nodes(); track root.id; let i = $index) {\n    <ea-tree-node\n      [node]=\"root\"\n      [level]=\"0\"\n      [posInSet]=\"i + 1\"\n      [setSize]=\"nodes().length\"\n      [selectedId]=\"selectedId()\"\n      [focusedId]=\"focusedId()\"\n      [expandedIds]=\"expandedSet()\"\n      [disabled]=\"disabled()\"\n      [expandLabel]=\"messages().tree.expand\"\n      [collapseLabel]=\"messages().tree.collapse\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\" />\n  }\n</ul>\n", styles: [":host{display:block}.ea-tree__list{display:block;padding:0;margin:0;border-radius:var(--radius-md);background-color:var(--ea-tree-background-color, transparent);color:var(--color-text-primary);list-style:none}.ea-tree__list:focus-visible{outline:none}.ea-tree--sm{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-sm)}.ea-tree--md{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-md)}.ea-tree--lg{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-lg)}.ea-tree--disabled{opacity:.6;pointer-events:none}\n"] }]
+            args: [{ selector: 'ea-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TreeNodeComponent], template: "<ul\n  #listEl\n  class=\"ea-tree__list\"\n  [class]=\"hostClasses()\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (focusin)=\"onTreeFocus($event)\">\n  @for (root of nodes(); track root.id; let i = $index) {\n    <ea-tree-node\n      [node]=\"root\"\n      [level]=\"0\"\n      [posInSet]=\"i + 1\"\n      [setSize]=\"nodes().length\"\n      [selectedId]=\"selectedId()\"\n      [focusedId]=\"focusedId()\"\n      [expandedIds]=\"expandedSet()\"\n      [disabled]=\"disabled()\"\n      [expandLabel]=\"messages().tree.expand\"\n      [collapseLabel]=\"messages().tree.collapse\"\n      (toggle)=\"onNodeToggle($event)\"\n      (select)=\"onNodeSelect($event)\" />\n  }\n</ul>\n", styles: [":host{display:block}.ea-tree__list{display:block;padding:0;margin:0;border-radius:var(--radius-md);background-color:var(--ea-tree-background-color, transparent);color:var(--color-text-primary);list-style:none}.ea-tree__list:focus-visible{outline:none}.ea-tree--xs{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-xs)}.ea-tree--sm{--ea-tree-indent: var(--space-3);--ea-tree-row-padding-block: var(--space-1);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-sm)}.ea-tree--md{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-2);font-size:var(--font-size-md)}.ea-tree--lg{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-lg)}.ea-tree--xl{--ea-tree-indent: var(--space-4);--ea-tree-row-padding-block: var(--space-2);--ea-tree-row-padding-inline: var(--space-3);font-size:var(--font-size-xl)}.ea-tree--disabled{opacity:.6;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }] } });
 
 /**