@eagami/ui 0.12.0 → 1.0.1

package/fesm2022/eagami-ui.mjs

@@ -3,6 +3,11 @@ import { input, signal, ChangeDetectionStrategy, Component, inject, computed, mo
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+/**
+ * Container for expandable content sections. By default only one item can be
+ * open at a time; set `multi` to allow several to stay expanded together.
+ * Provides a built-in chevron animation and supports per-item disabling.
+ */
 class AccordionComponent {
     multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
     expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
@@ -71,6 +76,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Single expandable section within an `ea-accordion`. Each item exposes a
+ * header button with the supplied `label` and reveals its projected content
+ * when expanded. Must be rendered inside an `ea-accordion`.
+ */
 class AccordionItemComponent {
     accordion = inject(AccordionComponent);
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -289,20 +299,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Inline banner for surfacing semantic messages such as success confirmations,
+ * warnings, or errors. Optionally dismissible, with a two-way `visible`
+ * binding and an automatically chosen ARIA role based on severity.
+ */
 class AlertComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
     visible = model(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Fires when the user dismisses the alert via its close button. */
     dismissed = output();
     alertClasses = computed(() => ({
         [`ea-alert--${this.variant()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "alertClasses" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const v = this.variant();
+        return v === 'error' || v === 'warning' ? 'alert' : 'status';
+    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Hides the alert and emits `dismissed`. */
     dismiss() {
         this.visible.set(false);
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    role=\"alert\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -311,9 +332,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         CheckIconComponent,
                         InfoIconComponent,
                         XIconComponent,
-                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    role=\"alert\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
+                    ], template: "@if (visible()) {\n  <div\n    class=\"ea-alert\"\n    [class.ea-alert--default]=\"variant() === 'default'\"\n    [class.ea-alert--success]=\"variant() === 'success'\"\n    [class.ea-alert--warning]=\"variant() === 'warning'\"\n    [class.ea-alert--error]=\"variant() === 'error'\"\n    [class.ea-alert--info]=\"variant() === 'info'\"\n    [attr.role]=\"role()\">\n    <span class=\"ea-alert__icon\">\n      @switch (variant()) {\n        @case ('success') {\n          <ea-icon-check />\n        }\n        @case ('warning') {\n          <ea-icon-alert-circle />\n        }\n        @case ('error') {\n          <ea-icon-alert-circle />\n        }\n        @case ('info') {\n          <ea-icon-info />\n        }\n        @default {\n          <ea-icon-info />\n        }\n      }\n    </span>\n    <div class=\"ea-alert__content\">\n      <ng-content />\n    </div>\n    @if (dismissible()) {\n      <button\n        class=\"ea-alert__close\"\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        (click)=\"dismiss()\">\n        <ea-icon-x />\n      </button>\n    }\n  </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.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"] }] } });
 
+/**
+ * Text input paired with a filtered suggestion list. Filters options by
+ * case-insensitive substring match, supports arrow-key navigation, and
+ * implements `ControlValueAccessor` for use with reactive and template-driven
+ * forms.
+ */
 class AutocompleteComponent {
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     hostEl = viewChild('hostEl', ...(ngDevMode ? [{ debugName: "hostEl" }] : /* istanbul ignore next */ []));
@@ -326,7 +353,7 @@ class AutocompleteComponent {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     minLength = input(0, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
     maxResults = input(10, ...(ngDevMode ? [{ debugName: "maxResults" }] : /* istanbul ignore next */ []));
     emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
@@ -334,11 +361,17 @@ class AutocompleteComponent {
     // Two-way value binding (current text value in the input)
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
-    optionSelected = output();
-    valueChanged = output();
+    /** Fires when the user picks an option from the suggestion list. */
+    selected = output();
+    /** Fires whenever the input text changes, including on free-text edits. */
+    changed = output();
+    /** Fires when the input receives focus. */
+    focused = output();
+    /** Fires when the input loses focus. */
+    blurred = output();
     // Internal state
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     justSelected = false;
@@ -347,9 +380,9 @@ class AutocompleteComponent {
     onTouched = () => { };
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     filteredOptions = computed(() => {
         const query = this.value().trim().toLowerCase();
         const allOptions = this.options();
@@ -365,8 +398,8 @@ class AutocompleteComponent {
     showEmpty = computed(() => this.showList() && this.filteredOptions().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
     wrapperClasses = computed(() => ({
         [`ea-autocomplete__wrapper--${this.size()}`]: true,
-        [`ea-autocomplete__wrapper--${this.resolvedStatus()}`]: true,
-        'ea-autocomplete__wrapper--focused': this.focused(),
+        'ea-autocomplete__wrapper--error': this.hasError(),
+        'ea-autocomplete__wrapper--focused': this.isFocused(),
         'ea-autocomplete__wrapper--disabled': this.isDisabled(),
     }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor
@@ -387,12 +420,13 @@ class AutocompleteComponent {
         const next = event.target.value;
         this.value.set(next);
         this.onChange(next);
-        this.valueChanged.emit(next);
+        this.changed.emit(next);
         this.isOpen.set(true);
         this.focusedIndex.set(-1);
     }
-    handleFocus() {
-        this.focused.set(true);
+    handleFocus(event) {
+        this.isFocused.set(true);
+        this.focused.emit(event);
         if (this.justSelected) {
             this.justSelected = false;
             return;
@@ -401,9 +435,10 @@ class AutocompleteComponent {
             this.isOpen.set(true);
         }
     }
-    handleBlur() {
-        this.focused.set(false);
+    handleBlur(event) {
+        this.isFocused.set(false);
         this.onTouched();
+        this.blurred.emit(event);
     }
     handleKeydown(event) {
         if (this.isDisabled() || this.readonly())
@@ -440,21 +475,27 @@ class AutocompleteComponent {
                 break;
         }
     }
+    /** Programmatically selects the given option, updating the value and closing the list. */
     selectOption(option) {
         if (option.disabled || this.isDisabled())
             return;
         this.value.set(option.label);
         this.onChange(option.label);
-        this.valueChanged.emit(option.label);
-        this.optionSelected.emit(option);
+        this.changed.emit(option.label);
+        this.selected.emit(option);
         this.justSelected = true;
         this.close();
         this.inputEl()?.nativeElement.focus();
     }
+    /** Closes the suggestion list without changing the current value. */
     close() {
         this.isOpen.set(false);
         this.focusedIndex.set(-1);
     }
+    /** Moves keyboard focus to the underlying text input. */
+    focus() {
+        this.inputEl()?.nativeElement.focus();
+    }
     moveFocus(delta) {
         const opts = this.filteredOptions();
         if (opts.length === 0)
@@ -476,13 +517,13 @@ class AutocompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AutocompleteComponent, isStandalone: true, selector: "ea-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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", optionSelected: "optionSelected", valueChanged: "valueChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AutocompleteComponent, isStandalone: true, selector: "ea-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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", selected: "selected", changed: "changed", focused: "focused", blurred: "blurred" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -492,8 +533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"] }]
-        }], 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: "error", 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"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], onDocumentClick: [{
+                    ], template: "<div\n  #hostEl\n  class=\"ea-autocomplete\">\n  @if (label()) {\n    <label\n      class=\"ea-autocomplete__label\"\n      [for]=\"id()\"\n      [class.ea-autocomplete__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-autocomplete__wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <span class=\"ea-autocomplete__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-autocomplete__input\"\n      type=\"text\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-autocomplete]=\"'list'\"\n      [attr.aria-controls]=\"id() + '-listbox'\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"handleKeydown($event)\" />\n\n    <span class=\"ea-autocomplete__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showList()) {\n    <ul\n      class=\"ea-autocomplete__listbox\"\n      role=\"listbox\"\n      [id]=\"id() + '-listbox'\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"ea-autocomplete__option\"\n          role=\"option\"\n          [id]=\"id() + '-option-' + i\"\n          [class.ea-autocomplete__option--focused]=\"i === focusedIndex()\"\n          [class.ea-autocomplete__option--disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"i === focusedIndex()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </li>\n      }\n      @if (showEmpty()) {\n        <li\n          class=\"ea-autocomplete__empty\"\n          role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    </ul>\n  }\n\n  @if (showError()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-autocomplete__message ea-autocomplete__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-autocomplete__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-autocomplete__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:var(--space-2);width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--sm{padding:var(--space-1-5) var(--space-2);min-height:2rem}.ea-autocomplete__wrapper--sm .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--md{padding:var(--space-2) var(--space-3);min-height:2.5rem}.ea-autocomplete__wrapper--md .ea-autocomplete__input{font-size:var(--font-size-sm)}.ea-autocomplete__wrapper--lg{padding:var(--space-2-5) var(--space-4);min-height:3rem}.ea-autocomplete__wrapper--lg .ea-autocomplete__input{font-size:var(--font-size-md)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{position:absolute;z-index:var(--z-index-dropdown);top:100%;left:0;right:0;max-height:15rem;padding:var(--space-1) 0;margin:var(--space-1) 0 0;overflow-y:auto;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}.ea-autocomplete__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-bg-muted)}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__message{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-autocomplete__message--hint{color:var(--color-text-secondary)}.ea-autocomplete__message--error{color:var(--color-error-default)}\n"] }]
+        }], 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']]
             }] } });
@@ -792,6 +833,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Loading placeholder rendered as a pulsing block in one of three shapes.
+ * Honours `prefers-reduced-motion` by suppressing the pulse animation when
+ * the user has expressed that preference.
+ */
 class SkeletonComponent {
     variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
@@ -817,6 +863,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'ea-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ea-skeleton\"\n  [class.ea-skeleton--text]=\"variant() === 'text'\"\n  [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n  [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n  [class.ea-skeleton--animated]=\"animated()\"\n  [style]=\"hostStyles()\"\n  aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
 
+/**
+ * Attaches a positioned tooltip to its host element. Shows on hover and
+ * focus, hides on leave/blur or Escape, and wires up `aria-describedby` so
+ * the tooltip text is announced to assistive technology.
+ */
 class TooltipDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -858,14 +909,33 @@ class TooltipDirective {
         this.renderer.setAttribute(this.tooltipEl, 'id', this.tooltipId);
         this.tooltipEl.textContent = this.eaTooltip();
         this.renderer.appendChild(document.body, this.tooltipEl);
-        this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', this.tooltipId);
+        this.appendDescribedBy();
         this.positionTooltip();
     }
     hide() {
         if (this.tooltipEl) {
             this.tooltipEl.remove();
             this.tooltipEl = null;
-            this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');
+            this.removeDescribedBy();
+        }
+    }
+    appendDescribedBy() {
+        const native = this.el.nativeElement;
+        const existing = (native.getAttribute('aria-describedby') ?? '').trim();
+        const tokens = existing ? existing.split(/\s+/) : [];
+        if (!tokens.includes(this.tooltipId))
+            tokens.push(this.tooltipId);
+        this.renderer.setAttribute(native, 'aria-describedby', tokens.join(' '));
+    }
+    removeDescribedBy() {
+        const native = this.el.nativeElement;
+        const existing = (native.getAttribute('aria-describedby') ?? '').trim();
+        const tokens = existing.split(/\s+/).filter((t) => t && t !== this.tooltipId);
+        if (tokens.length) {
+            this.renderer.setAttribute(native, 'aria-describedby', tokens.join(' '));
+        }
+        else {
+            this.renderer.removeAttribute(native, 'aria-describedby');
         }
     }
     positionTooltip() {
@@ -907,6 +977,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { eaTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
 
+/**
+ * Canvas-based image editor for cropping avatars. Supports drag-and-drop
+ * upload, mouse/touch panning, zoom via slider or scroll wheel, and exports
+ * the cropped image as either a `Blob` or a data URL.
+ */
 class AvatarEditorComponent {
     canvasEl = viewChild('canvasEl', ...(ngDevMode ? [{ debugName: "canvasEl" }] : /* istanbul ignore next */ []));
     fileInputEl = viewChild('fileInputEl', ...(ngDevMode ? [{ debugName: "fileInputEl" }] : /* istanbul ignore next */ []));
@@ -921,17 +996,24 @@ class AvatarEditorComponent {
     exportQuality = input(0.92, ...(ngDevMode ? [{ debugName: "exportQuality" }] : /* istanbul ignore next */ []));
     exportType = input('image/png', ...(ngDevMode ? [{ debugName: "exportType" }] : /* istanbul ignore next */ []));
     cropState = input(...(ngDevMode ? [undefined, { debugName: "cropState" }] : /* istanbul ignore next */ []));
+    /** Fires when the user finalises a crop via {@link exportCrop}; payload contains both `Blob` and data URL. */
     cropped = output();
+    /** Fires when a file is chosen from disk or dropped onto the editor. */
     fileSelected = output();
+    /** Fires when the current image is cleared via the remove control. */
     removed = output();
-    fileError = output();
-    cropStateChange = output();
+    /** Fires with a human-readable message when validation fails (wrong type, oversized file, etc.). */
+    errored = output();
+    /** Fires whenever the user pans or zooms the image; useful for persisting in-progress crops. */
+    cropStateChanged = output();
     hasImage = signal(false, ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
     isAtOriginal = signal(false, ...(ngDevMode ? [{ debugName: "isAtOriginal" }] : /* istanbul ignore next */ []));
     isLoading = computed(() => this.isFetching() || this.loading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     zoom = signal(1, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     canRevert = computed(() => !this.isAtOriginal() && this.originalCaptured, ...(ngDevMode ? [{ debugName: "canRevert" }] : /* istanbul ignore next */ []));
+    /** True when the visible crop is darker than mid-grey; drives the `--on-light` class on the overlay so the "Change photo" affordance stays readable. */
+    isImageDark = signal(true, ...(ngDevMode ? [{ debugName: "isImageDark" }] : /* istanbul ignore next */ []));
     image = null;
     offsetX = 0;
     offsetY = 0;
@@ -1001,6 +1083,7 @@ class AvatarEditorComponent {
             this.loadFile(file);
         input.value = '';
     }
+    /** Opens the native file picker dialog. */
     openFilePicker() {
         this.fileInputEl()?.nativeElement.click();
     }
@@ -1087,6 +1170,48 @@ class AvatarEditorComponent {
         const delta = event.deltaY > 0 ? -0.1 : 0.1;
         this.setZoom(this.zoom() + delta);
     }
+    onCanvasKeydown(event) {
+        if (!this.hasImage() || this.isLoading())
+            return;
+        const step = event.shiftKey ? 20 : 5;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.offsetX += step;
+                handled = true;
+                break;
+            case 'ArrowRight':
+                this.offsetX -= step;
+                handled = true;
+                break;
+            case 'ArrowUp':
+                this.offsetY += step;
+                handled = true;
+                break;
+            case 'ArrowDown':
+                this.offsetY -= step;
+                handled = true;
+                break;
+            case '+':
+            case '=':
+                this.setZoom(this.zoom() + 0.1);
+                event.preventDefault();
+                return;
+            case '-':
+            case '_':
+                this.setZoom(this.zoom() - 0.1);
+                event.preventDefault();
+                return;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.isAtOriginal.set(false);
+            this.clampOffset();
+            this.draw();
+            this.emitCropStateChange();
+        }
+    }
+    /** Sets the zoom level, clamped to the configured `minZoom`/`maxZoom` range. */
     setZoom(value) {
         this.isAtOriginal.set(false);
         const clamped = Math.min(this.maxZoom(), Math.max(this.minZoom(), value));
@@ -1099,6 +1224,7 @@ class AvatarEditorComponent {
         const value = parseFloat(event.target.value);
         this.setZoom(value);
     }
+    /** Clears the loaded image and resets pan/zoom to defaults. */
     removeImage() {
         this.image = null;
         this.hasImage.set(false);
@@ -1110,6 +1236,7 @@ class AvatarEditorComponent {
         this.isAtOriginal.set(this.originalCaptured && !this.originalImage);
         this.removed.emit();
     }
+    /** Marks the current image and crop state as the baseline for {@link revertImage}. */
     captureOriginal() {
         this.originalCaptured = true;
         this.originalImage = this.image;
@@ -1118,6 +1245,7 @@ class AvatarEditorComponent {
             : null;
         this.isAtOriginal.set(true);
     }
+    /** Restores the image and crop state captured by the most recent {@link captureOriginal}. */
     revertImage() {
         if (!this.originalCaptured)
             return;
@@ -1148,6 +1276,7 @@ class AvatarEditorComponent {
             this.isAtOriginal.set(true);
         }
     }
+    /** Renders the current crop to an offscreen canvas, emits `cropped`, and resolves with the resulting `Blob`. */
     exportCrop() {
         return new Promise((resolve, reject) => {
             if (!this.image) {
@@ -1218,12 +1347,12 @@ class AvatarEditorComponent {
     }
     loadFile(file) {
         if (!file.type.startsWith('image/')) {
-            this.fileError.emit('File must be an image');
+            this.errored.emit('File must be an image');
             return;
         }
         if (file.size > this.maxFileSize()) {
             const maxMb = Math.round(this.maxFileSize() / (1024 * 1024));
-            this.fileError.emit(`File exceeds ${maxMb} MB limit`);
+            this.errored.emit(`File exceeds ${maxMb} MB limit`);
             return;
         }
         this.isAtOriginal.set(false);
@@ -1299,6 +1428,7 @@ class AvatarEditorComponent {
         ctx.clearRect(0, 0, size, size);
         const { drawX, drawY, drawW, drawH } = this.getDrawParams();
         ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
+        this.updateImageDarkness(ctx, size);
         // Draw overlay mask
         ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
         ctx.fillRect(0, 0, size, size);
@@ -1315,10 +1445,56 @@ class AvatarEditorComponent {
         ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
         ctx.globalCompositeOperation = 'source-over';
     }
+    /**
+     * Samples the visible crop region and stores whether it's darker than
+     * mid-grey, so the hover overlay can flip its label and icon between
+     * white (on dark photos) and black (on light photos).
+     *
+     * Restricts sampling to the inscribed circle for circle crops to ignore
+     * the soon-to-be-masked corners. Uses Rec. 601 perceptual luminance
+     * weights; transparent pixels and CORS-tainted canvases default to a
+     * "dark" assumption (white ink).
+     */
+    updateImageDarkness(ctx, size) {
+        let data;
+        try {
+            data = ctx.getImageData(0, 0, size, size).data;
+        }
+        catch {
+            this.isImageDark.set(true);
+            return;
+        }
+        const isCircle = this.shape() === 'circle';
+        const cx = size / 2;
+        const cy = size / 2;
+        const radiusSq = cx * cx;
+        let sum = 0;
+        let count = 0;
+        for (let y = 0; y < size; y++) {
+            for (let x = 0; x < size; x++) {
+                if (isCircle) {
+                    const dx = x - cx;
+                    const dy = y - cy;
+                    if (dx * dx + dy * dy > radiusSq)
+                        continue;
+                }
+                const i = (y * size + x) * 4;
+                if (data[i + 3] === 0)
+                    continue;
+                sum += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+                count++;
+            }
+        }
+        // Threshold biased above mid-grey (128) so images on the border between
+        // light and dark still get the cleaner white ink; only clearly-bright
+        // photos flip to black.
+        if (count > 0)
+            this.isImageDark.set(sum / count < 170);
+    }
     emitCropStateChange() {
         if (this._suppressCropStateEmit)
             return;
-        this.cropStateChange.emit({
+        this.cropStateChanged.emit({
             zoom: this.zoom(),
             offsetX: this.offsetX,
             offsetY: this.offsetY,
@@ -1332,7 +1508,7 @@ class AvatarEditorComponent {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", fileError: "fileError", cropStateChange: "cropStateChange" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div class=\"ea-avatar-editor__canvas-overlay\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-overlay);color:var(--color-text-inverse);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    aria-label=\"Upload image\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          aria-label=\"Image preview, drag or use arrow keys to pan, slider to zoom\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarEditorComponent, decorators: [{
             type: Component,
@@ -1346,8 +1522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         TrashIconComponent,
                         UploadIconComponent,
                         TooltipDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div class=\"ea-avatar-editor__canvas-overlay\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-overlay);color:var(--color-text-inverse);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], cropStateChange: [{ type: i0.Output, args: ["cropStateChange"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    aria-label=\"Upload image\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">Drop image or click to upload</span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"img\"\n          tabindex=\"0\"\n          aria-label=\"Image preview, drag or use arrow keys to pan, slider to zoom\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>Change photo</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Revert to original'\"\n      aria-label=\"Revert to original\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom out'\"\n      aria-label=\"Zoom out\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      aria-label=\"Zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"'Zoom in'\"\n      aria-label=\"Zoom in\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"'Remove image'\"\n      aria-label=\"Remove image\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], errored: [{ type: i0.Output, args: ["errored"] }], cropStateChanged: [{ type: i0.Output, args: ["cropStateChanged"] }] } });
 
 class UserIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1397,6 +1573,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Compact image used to represent a user or entity. Falls back to initials
+ * when no `src` is provided, then to a generic user icon when neither image
+ * nor initials are available.
+ */
 class AvatarComponent {
     src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
@@ -1414,13 +1595,17 @@ class AvatarComponent {
         event.target.style.display = 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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() || 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.9", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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() || 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;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"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
+/**
+ * Compact pill-shaped indicator used to communicate status, counts, or labels
+ * inline with surrounding content.
+ */
 class BadgeComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1476,11 +1661,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Navigation trail that shows the user's location within a hierarchy. Items
+ * with an `href` render as links, others render as buttons; the final item is
+ * always treated as the current page and is non-interactive.
+ */
 class BreadcrumbsComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    itemClicked = output();
+    /** Fires when a non-disabled, non-final breadcrumb is activated. */
+    clicked = output();
     isLast(index) {
         return index === this.items().length - 1;
     }
@@ -1489,16 +1680,21 @@ class BreadcrumbsComponent {
             event.preventDefault();
             return;
         }
-        this.itemClicked.emit({ item, index, event });
+        this.clicked.emit({ item, index, event });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"], dependencies: [{ kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"], dependencies: [{ kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-breadcrumbs', imports: [ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav\n  class=\"ea-breadcrumbs\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ol class=\"ea-breadcrumbs__list\">\n    @for (item of items(); track $index; let i = $index; let last = $last) {\n      <li class=\"ea-breadcrumbs__item\">\n        @if (last) {\n          <span\n            class=\"ea-breadcrumbs__current\"\n            aria-current=\"page\">\n            {{ item.label }}\n          </span>\n        } @else if (item.disabled) {\n          <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n            {{ item.label }}\n          </span>\n        } @else if (item.href) {\n          <a\n            class=\"ea-breadcrumbs__link\"\n            [href]=\"item.href\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n            (click)=\"handleClick(item, i, $event)\">\n            {{ item.label }}\n          </button>\n        }\n\n        @if (!last) {\n          @if (separator() === 'chevron') {\n            <ea-icon-chevron-right\n              class=\"ea-breadcrumbs__separator\"\n              aria-hidden=\"true\" />\n          } @else {\n            <span\n              class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n              aria-hidden=\"true\">\n              /\n            </span>\n          }\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-1);min-width:0}.ea-breadcrumbs__link{padding:var(--space-0-5) var(--space-1);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:var(--space-0-5) var(--space-1);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto;font-size:var(--font-size-sm)}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * Standard action button supporting primary, secondary, ghost, and danger
+ * variants. Includes a loading state that swaps the label for a spinner while
+ * preserving the rendered width.
+ */
 class ButtonComponent {
     // Inputs
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -1510,6 +1706,7 @@ class ButtonComponent {
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     ariaCurrent = input(undefined, { ...(ngDevMode ? { debugName: "ariaCurrent" } : /* istanbul ignore next */ {}), alias: 'aria-current' });
     // Output
+    /** Fires when the button is activated; suppressed while disabled or loading. */
     clicked = output();
     // Derived
     isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -1537,6 +1734,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-current]=\"ariaCurrent() || null\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], 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"] }] } });
 
+/**
+ * Thin separator used to visually divide content. Renders horizontally by
+ * default and may include an optional centred label (e.g. "or").
+ */
 class DividerComponent {
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1552,6 +1753,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * Surface for grouping related content. Provides optional `header` and
+ * `footer` content slots and supports elevated, outlined, and filled
+ * variants. The card shadow can be customised per instance via the
+ * `--ea-card-shadow` CSS custom property.
+ */
 class CardComponent {
     // Inputs
     variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -1566,34 +1773,47 @@ 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.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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=\"[eaCardHeader]\" />\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=\"[eaCardFooter]\" />\n  </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;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-base);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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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-height:0}.ea-card{display:flex;flex-direction:column;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);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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-card', imports: [NgClass, DividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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=\"[eaCardHeader]\" />\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=\"[eaCardFooter]\" />\n  </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;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-base);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"] }]
+            args: [{ selector: 'ea-card', imports: [NgClass, DividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-height:0}.ea-card{display:flex;flex-direction:column;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);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"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], headerDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerDivider", required: false }] }] } });
 
+/**
+ * Boolean form control with support for an indeterminate visual state. Pairs
+ * a visually hidden native input with a custom checkmark and integrates with
+ * Angular forms via `ControlValueAccessor`.
+ */
 class CheckboxComponent {
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     id = input(`ea-checkbox-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way checked binding
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires with the new checked state whenever the user toggles the checkbox. */
     changed = output();
     // Internal state
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-checkbox--${this.size()}`]: true,
         'ea-checkbox--disabled': this.isDisabled(),
         'ea-checkbox--checked': this.checked(),
         'ea-checkbox--indeterminate': this.indeterminate(),
+        'ea-checkbox--error': this.hasError(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor callbacks
     onChange = () => { };
@@ -1622,13 +1842,13 @@ class CheckboxComponent {
         this.changed.emit(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<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    (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 class=\"ea-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-checkbox-field\">\n  <label\n    class=\"ea-checkbox\"\n    [ngClass]=\"hostClasses()\"\n    [for]=\"id()\">\n    <input\n      #inputEl\n      type=\"checkbox\"\n      class=\"ea-checkbox__input\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [indeterminate]=\"indeterminate()\"\n      [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n\n    <span\n      class=\"ea-checkbox__box\"\n      aria-hidden=\"true\">\n      @if (indeterminate()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      } @else if (checked()) {\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </span>\n\n    @if (label()) {\n      <span\n        class=\"ea-checkbox__label\"\n        [class.ea-checkbox__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox--error .ea-checkbox__box{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -1638,8 +1858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<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    (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 class=\"ea-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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"] }] } });
+                    ], 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      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-checkbox-field__message ea-checkbox-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-checkbox-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-checkbox-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-checkbox-field__message--hint{color:var(--color-text-secondary)}.ea-checkbox-field__message--error{color:var(--color-error-default)}.ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}.ea-checkbox__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-checkbox--error .ea-checkbox__box{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 }] }], 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 ArrowDownIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1783,6 +2003,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Table for tabular data with sortable columns, sticky headers, and density
+ * presets. Supports striping, borders, hoverable rows, and custom cell or
+ * header templates via `ng-template`. Sort state is exposed as a two-way
+ * `model()` binding.
+ */
 class DataTableComponent {
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -1794,7 +2020,8 @@ class DataTableComponent {
     bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     noDataText = input('No data available', ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
     sort = model({ column: '', direction: null }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
-    sortChange = output();
+    /** Fires whenever the sort column or direction changes via header click. */
+    sorted = output();
     noDataTemplate = contentChild('noData', ...(ngDevMode ? [{ debugName: "noDataTemplate" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-data-table--${this.density()}`]: true,
@@ -1851,14 +2078,14 @@ class DataTableComponent {
         }
         const next = { column: direction ? col.key : '', direction };
         this.sort.set(next);
-        this.sortChange.emit(next);
+        this.sorted.emit(next);
     }
     trackByFn(_index, item) {
         const key = this.trackBy();
         return key ? item[key] : _index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sortChange: "sortChange" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <table class=\"ea-data-table__table\">\n    <thead class=\"ea-data-table__head\">\n      <tr class=\"ea-data-table__row ea-data-table__row--header\">\n        @for (col of columns(); track col.key) {\n          <th\n            class=\"ea-data-table__cell ea-data-table__cell--header\"\n            [class.ea-data-table__cell--sortable]=\"col.sortable\"\n            [class.ea-data-table__cell--sorted]=\"\n              sort().column === col.key && sort().direction\n            \"\n            [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n            [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n            [style.width]=\"col.width ?? null\"\n            [attr.aria-sort]=\"\n              sort().column === col.key && sort().direction === 'asc'\n                ? 'ascending'\n                : sort().column === col.key && sort().direction === 'desc'\n                  ? 'descending'\n                  : col.sortable\n                    ? 'none'\n                    : null\n            \"\n            (click)=\"onHeaderClick(col)\"\n            (keydown.enter)=\"onHeaderClick(col)\"\n            (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n            [attr.tabindex]=\"col.sortable ? 0 : null\"\n            [attr.role]=\"col.sortable ? 'columnheader button' : 'columnheader'\">\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n            } @else {\n              <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n            }\n            @if (col.sortable) {\n              <span class=\"ea-data-table__sort-icon\">\n                @if (sort().column === col.key && sort().direction === 'asc') {\n                  <ea-icon-arrow-up />\n                } @else if (sort().column === col.key && sort().direction === 'desc') {\n                  <ea-icon-arrow-down />\n                } @else {\n                  <ea-icon-chevrons-up-down />\n                }\n              </span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"ea-data-table__body\">\n      @if (sortedData().length === 0) {\n        <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n          <td\n            class=\"ea-data-table__cell ea-data-table__cell--empty\"\n            [attr.colspan]=\"columns().length\">\n            @if (noDataTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n            } @else {\n              {{ noDataText() }}\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of sortedData(); track trackByFn($index, row)) {\n          <tr\n            class=\"ea-data-table__row\"\n            role=\"row\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"ea-data-table__cell\"\n                [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                role=\"gridcell\">\n                @if (col.cellTemplate) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      value: getCellValue(row, col.key),\n                    }\" />\n                } @else if (col.format) {\n                  {{ col.format(getCellValue(row, col.key)) }}\n                } @else {\n                  {{ getCellValue(row, col.key) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow-x:auto;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <table class=\"ea-data-table__table\">\n    <thead class=\"ea-data-table__head\">\n      <tr class=\"ea-data-table__row ea-data-table__row--header\">\n        @for (col of columns(); track col.key) {\n          <th\n            class=\"ea-data-table__cell ea-data-table__cell--header\"\n            [class.ea-data-table__cell--sortable]=\"col.sortable\"\n            [class.ea-data-table__cell--sorted]=\"\n              sort().column === col.key && sort().direction\n            \"\n            [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n            [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n            [style.width]=\"col.width ?? null\"\n            [attr.aria-sort]=\"\n              sort().column === col.key && sort().direction === 'asc'\n                ? 'ascending'\n                : sort().column === col.key && sort().direction === 'desc'\n                  ? 'descending'\n                  : col.sortable\n                    ? 'none'\n                    : null\n            \"\n            (click)=\"onHeaderClick(col)\"\n            (keydown.enter)=\"onHeaderClick(col)\"\n            (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n            [attr.tabindex]=\"col.sortable ? 0 : null\">\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n            } @else {\n              <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n            }\n            @if (col.sortable) {\n              <span class=\"ea-data-table__sort-icon\">\n                @if (sort().column === col.key && sort().direction === 'asc') {\n                  <ea-icon-arrow-up />\n                } @else if (sort().column === col.key && sort().direction === 'desc') {\n                  <ea-icon-arrow-down />\n                } @else {\n                  <ea-icon-chevrons-up-down />\n                }\n              </span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"ea-data-table__body\">\n      @if (sortedData().length === 0) {\n        <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n          <td\n            class=\"ea-data-table__cell ea-data-table__cell--empty\"\n            [attr.colspan]=\"columns().length\">\n            @if (noDataTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n            } @else {\n              {{ noDataText() }}\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of sortedData(); track trackByFn($index, row)) {\n          <tr\n            class=\"ea-data-table__row\"\n            role=\"row\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"ea-data-table__cell\"\n                [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                role=\"gridcell\">\n                @if (col.cellTemplate) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      value: getCellValue(row, col.key),\n                    }\" />\n                } @else if (col.format) {\n                  {{ col.format(getCellValue(row, col.key)) }}\n                } @else {\n                  {{ getCellValue(row, col.key) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow-x:auto;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -1868,19 +2095,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ArrowUpIconComponent,
                         ArrowDownIconComponent,
                         ChevronsUpDownIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <table class=\"ea-data-table__table\">\n    <thead class=\"ea-data-table__head\">\n      <tr class=\"ea-data-table__row ea-data-table__row--header\">\n        @for (col of columns(); track col.key) {\n          <th\n            class=\"ea-data-table__cell ea-data-table__cell--header\"\n            [class.ea-data-table__cell--sortable]=\"col.sortable\"\n            [class.ea-data-table__cell--sorted]=\"\n              sort().column === col.key && sort().direction\n            \"\n            [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n            [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n            [style.width]=\"col.width ?? null\"\n            [attr.aria-sort]=\"\n              sort().column === col.key && sort().direction === 'asc'\n                ? 'ascending'\n                : sort().column === col.key && sort().direction === 'desc'\n                  ? 'descending'\n                  : col.sortable\n                    ? 'none'\n                    : null\n            \"\n            (click)=\"onHeaderClick(col)\"\n            (keydown.enter)=\"onHeaderClick(col)\"\n            (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n            [attr.tabindex]=\"col.sortable ? 0 : null\"\n            [attr.role]=\"col.sortable ? 'columnheader button' : 'columnheader'\">\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n            } @else {\n              <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n            }\n            @if (col.sortable) {\n              <span class=\"ea-data-table__sort-icon\">\n                @if (sort().column === col.key && sort().direction === 'asc') {\n                  <ea-icon-arrow-up />\n                } @else if (sort().column === col.key && sort().direction === 'desc') {\n                  <ea-icon-arrow-down />\n                } @else {\n                  <ea-icon-chevrons-up-down />\n                }\n              </span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"ea-data-table__body\">\n      @if (sortedData().length === 0) {\n        <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n          <td\n            class=\"ea-data-table__cell ea-data-table__cell--empty\"\n            [attr.colspan]=\"columns().length\">\n            @if (noDataTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n            } @else {\n              {{ noDataText() }}\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of sortedData(); track trackByFn($index, row)) {\n          <tr\n            class=\"ea-data-table__row\"\n            role=\"row\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"ea-data-table__cell\"\n                [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                role=\"gridcell\">\n                @if (col.cellTemplate) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      value: getCellValue(row, col.key),\n                    }\" />\n                } @else if (col.format) {\n                  {{ col.format(getCellValue(row, col.key)) }}\n                } @else {\n                  {{ getCellValue(row, col.key) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow-x:auto;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\"\n  role=\"grid\">\n  <table class=\"ea-data-table__table\">\n    <thead class=\"ea-data-table__head\">\n      <tr class=\"ea-data-table__row ea-data-table__row--header\">\n        @for (col of columns(); track col.key) {\n          <th\n            class=\"ea-data-table__cell ea-data-table__cell--header\"\n            [class.ea-data-table__cell--sortable]=\"col.sortable\"\n            [class.ea-data-table__cell--sorted]=\"\n              sort().column === col.key && sort().direction\n            \"\n            [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n            [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n            [style.width]=\"col.width ?? null\"\n            [attr.aria-sort]=\"\n              sort().column === col.key && sort().direction === 'asc'\n                ? 'ascending'\n                : sort().column === col.key && sort().direction === 'desc'\n                  ? 'descending'\n                  : col.sortable\n                    ? 'none'\n                    : null\n            \"\n            (click)=\"onHeaderClick(col)\"\n            (keydown.enter)=\"onHeaderClick(col)\"\n            (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n            [attr.tabindex]=\"col.sortable ? 0 : null\">\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n            } @else {\n              <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n            }\n            @if (col.sortable) {\n              <span class=\"ea-data-table__sort-icon\">\n                @if (sort().column === col.key && sort().direction === 'asc') {\n                  <ea-icon-arrow-up />\n                } @else if (sort().column === col.key && sort().direction === 'desc') {\n                  <ea-icon-arrow-down />\n                } @else {\n                  <ea-icon-chevrons-up-down />\n                }\n              </span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody class=\"ea-data-table__body\">\n      @if (sortedData().length === 0) {\n        <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n          <td\n            class=\"ea-data-table__cell ea-data-table__cell--empty\"\n            [attr.colspan]=\"columns().length\">\n            @if (noDataTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n            } @else {\n              {{ noDataText() }}\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of sortedData(); track trackByFn($index, row)) {\n          <tr\n            class=\"ea-data-table__row\"\n            role=\"row\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"ea-data-table__cell\"\n                [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                role=\"gridcell\">\n                @if (col.cellTemplate) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      value: getCellValue(row, col.key),\n                    }\" />\n                } @else if (col.format) {\n                  {{ col.format(getCellValue(row, col.key)) }}\n                } @else {\n                  {{ getCellValue(row, col.key) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow-x:auto;width:100%;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-subtle)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-default);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-default)}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-left:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--color-border-default);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--color-bg-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-bg-muted)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-default)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
 
+/**
+ * Verification code entry made up of one input per digit. Auto-advances on
+ * input, supports paste of the full code at once, and integrates with Angular
+ * forms via `ControlValueAccessor`.
+ */
 class CodeInputComponent {
     digitEls = viewChildren('digitEl', ...(ngDevMode ? [{ debugName: "digitEls" }] : /* istanbul ignore next */ []));
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     id = input(`ea-code-input-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way value binding
@@ -1889,15 +2122,16 @@ class CodeInputComponent {
     focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires with the full code once every digit has been entered. */
     completed = output();
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     digits = computed(() => {
         const val = this.value();
         const len = this.length();
@@ -1917,6 +2151,8 @@ class CodeInputComponent {
         this._formDisabled.set(isDisabled);
     }
     handleInput(event, index) {
+        if (this.readonly())
+            return;
         const input = event.target;
         const char = input.value.replace(/[^0-9]/g, '').slice(-1);
         input.value = char;
@@ -1936,6 +2172,8 @@ class CodeInputComponent {
     handleKeydown(event, index) {
         const inputs = this.digitEls();
         if (event.key === 'Backspace') {
+            if (this.readonly())
+                return;
             event.preventDefault();
             const current = this.value();
             const chars = current.padEnd(this.length(), ' ').split('');
@@ -1961,6 +2199,8 @@ class CodeInputComponent {
     }
     handlePaste(event) {
         event.preventDefault();
+        if (this.readonly())
+            return;
         const pasted = (event.clipboardData?.getData('text') ?? '').replace(/[^0-9]/g, '');
         if (!pasted)
             return;
@@ -1982,6 +2222,7 @@ class CodeInputComponent {
         this.focusedIndex.set(-1);
         this.onTouched();
     }
+    /** Moves keyboard focus to the next empty digit (or the last one when full). */
     focus() {
         const val = this.value();
         const index = Math.min(val.length, this.length() - 1);
@@ -1991,13 +2232,13 @@ class CodeInputComponent {
         this.digitEls()[index]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CodeInputComponent, isStandalone: true, selector: "ea-code-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, 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", completed: "completed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CodeInputComponent, isStandalone: true, selector: "ea-code-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", 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 }, 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", completed: "completed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CodeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"resolvedStatus() === 'error'\"\n    [class.ea-code-input-group--success]=\"resolvedStatus() === 'success'\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? 'Verification code, ' + length() + ' digits' : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--success .ea-code-input{border-color:var(--color-success-default)}.ea-code-input-group--success .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? 'Verification code, ' + length() + ' digits' : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
@@ -2007,8 +2248,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => CodeInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"resolvedStatus() === 'error'\"\n    [class.ea-code-input-group--success]=\"resolvedStatus() === 'success'\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? 'Verification code, ' + length() + ' digits' : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--success .ea-code-input{border-color:var(--color-success-default)}.ea-code-input-group--success .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
-        }], propDecorators: { digitEls: [{ type: i0.ViewChildren, args: ['digitEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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"] }] } });
+                    ], template: "<div class=\"ea-code-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-code-input-field__label\"\n      [class.ea-code-input-field__label--required]=\"required()\"\n      [id]=\"id() + '-label'\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-code-input-group\"\n    [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n    [class.ea-code-input-group--md]=\"size() === 'md'\"\n    [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n    [class.ea-code-input-group--error]=\"hasError()\"\n    [class.ea-code-input-group--disabled]=\"isDisabled()\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? 'Verification code, ' + length() + ' digits' : null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (i of indices(); track i) {\n      <input\n        #digitEl\n        class=\"ea-code-input\"\n        [class.ea-code-input--focused]=\"focusedIndex() === i\"\n        [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        maxlength=\"1\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"digits()[i]\"\n        [placeholder]=\"placeholder()\"\n        [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        (input)=\"handleInput($event, i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n        (paste)=\"handlePaste($event)\"\n        (focus)=\"handleFocus(i)\"\n        (blur)=\"handleBlur()\" />\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], 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 {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CalendarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2132,17 +2373,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Calendar popover for selecting a single date. Supports `min`/`max` bounds,
+ * configurable week start, locale-aware formatting via `Intl.DateTimeFormat`,
+ * and full keyboard navigation (arrows, PageUp/PageDown, Home/End, Enter,
+ * Escape). Integrates with Angular forms via `ControlValueAccessor`.
+ */
 class DatePickerComponent {
     hostEl = viewChild('hostEl', ...(ngDevMode ? [{ debugName: "hostEl" }] : /* istanbul ignore next */ []));
     triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
     // Inputs
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Select date…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     format = input('medium', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
@@ -2152,6 +2401,7 @@ class DatePickerComponent {
     // Two-way value binding (Date at local midnight, or null)
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires when the selected date changes, including when cleared. */
     changed = output();
     // Internal state
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -2164,12 +2414,12 @@ class DatePickerComponent {
     onTouched = () => { };
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     triggerClasses = computed(() => ({
         [`ea-date-picker__trigger--${this.size()}`]: true,
-        [`ea-date-picker__trigger--${this.resolvedStatus()}`]: true,
+        'ea-date-picker__trigger--error': this.hasError(),
         'ea-date-picker__trigger--open': this.isOpen(),
         'ea-date-picker__trigger--disabled': this.isDisabled(),
     }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
@@ -2252,8 +2502,9 @@ class DatePickerComponent {
         this._formDisabled.set(isDisabled);
     }
     // Handlers
+    /** Toggles the calendar popover between open and closed. */
     toggle() {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         if (this.isOpen()) {
             this.close();
@@ -2262,19 +2513,31 @@ class DatePickerComponent {
             this.open();
         }
     }
+    /** Opens the calendar popover and moves focus to the focused day cell. */
     open() {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         const current = this.value() ?? new Date();
         this.viewYear.set(current.getFullYear());
         this.viewMonth.set(current.getMonth());
         this.focusedDate.set(this.startOfDay(current));
         this.isOpen.set(true);
+        afterNextRender(() => this.focusFocusedDayCell(), { injector: this.injector });
     }
+    /** Closes the calendar popover. */
     close() {
         this.isOpen.set(false);
         this.focusedDate.set(null);
     }
+    focusFocusedDayCell() {
+        const host = this.hostEl()?.nativeElement;
+        const focusedCell = host?.querySelector('.ea-date-picker__day--focused');
+        focusedCell?.focus();
+    }
+    /** Moves keyboard focus to the trigger button. */
+    focus() {
+        this.triggerEl()?.nativeElement.focus();
+    }
     selectDay(day) {
         if (day.isDisabled)
             return;
@@ -2286,9 +2549,10 @@ class DatePickerComponent {
         this.close();
         this.triggerEl()?.nativeElement.focus();
     }
+    /** Clears the selected date and emits `changed` with `null`. */
     clear(event) {
         event.stopPropagation();
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         this.value.set(null);
         this.onChange(null);
@@ -2460,13 +2724,13 @@ class DatePickerComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerComponent, isStandalone: true, selector: "ea-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerComponent, isStandalone: true, selector: "ea-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <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-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleTriggerKeydown($event)\">\n      <ea-icon-calendar\n        class=\"ea-date-picker__trigger-icon\"\n        aria-hidden=\"true\" />\n      <span\n        class=\"ea-date-picker__trigger-value\"\n        [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n        {{ displayValue() || placeholder() }}\n      </span>\n      @if (value() && !isDisabled()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          tabindex=\"-1\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "hostEl", first: true, predicate: ["hostEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || placeholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2482,12 +2746,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <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-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleTriggerKeydown($event)\">\n      <ea-icon-calendar\n        class=\"ea-date-picker__trigger-icon\"\n        aria-hidden=\"true\" />\n      <span\n        class=\"ea-date-picker__trigger-value\"\n        [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n        {{ displayValue() || placeholder() }}\n      </span>\n      @if (value() && !isDisabled()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          tabindex=\"-1\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
-        }], propDecorators: { hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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: "error", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
+                    ], template: "<div\n  #hostEl\n  class=\"ea-date-picker-field\">\n  @if (label()) {\n    <label\n      class=\"ea-date-picker-field__label\"\n      [for]=\"id()\"\n      [class.ea-date-picker-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-date-picker\">\n    <div class=\"ea-date-picker__trigger-wrapper\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-date-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-calendar\n          class=\"ea-date-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span\n          class=\"ea-date-picker__trigger-value\"\n          [class.ea-date-picker__trigger-value--placeholder]=\"!displayValue()\">\n          {{ displayValue() || placeholder() }}\n        </span>\n      </button>\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          aria-label=\"Clear date\"\n          (click)=\"clear($event)\">\n          <span aria-hidden=\"true\">\u00D7</span>\n        </button>\n      }\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"ea-date-picker__popover\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"id() + '-label'\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous year\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Previous month\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            [id]=\"id() + '-label'\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next month\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            aria-label=\"Next year\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n            <ea-icon-chevron-right aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <button\n                  type=\"button\"\n                  class=\"ea-date-picker__day\"\n                  role=\"gridcell\"\n                  [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                  [class.ea-date-picker__day--today]=\"day.isToday\"\n                  [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                  [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                  [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-selected]=\"day.isSelected\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.day }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            Today\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-date-picker-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-date-picker-field__message ea-date-picker-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-date-picker-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-date-picker-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-date-picker-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-date-picker-field__message--hint{color:var(--color-text-secondary)}.ea-date-picker-field__message--error{color:var(--color-error-default)}.ea-date-picker-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-date-picker,.ea-date-picker__trigger-wrapper{position:relative}.ea-date-picker__trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-date-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-date-picker__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-date-picker__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-date-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-date-picker__trigger--error{border-color:var(--color-error-default)}.ea-date-picker__trigger--error.ea-date-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-date-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-date-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-date-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-date-picker__trigger-value--placeholder{color:var(--color-text-tertiary)}.ea-date-picker__clear{position:absolute;top:50%;right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition-colors);transform:translateY(-50%)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__clear:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__popover{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:var(--z-index-dropdown);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);min-width:17.5rem;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.ea-date-picker__header{display:flex;align-items:center;gap:var(--space-1)}.ea-date-picker__nav-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:.875em;height:.875em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-left:-.375em}.ea-date-picker__month-label{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:var(--space-1)}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not(:disabled){background-color:var(--color-bg-muted)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-default)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-bg-muted)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-brand-default);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"] }]
+        }], propDecorators: { hostEl: [{ type: i0.ViewChild, args: ['hostEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], weekStartsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartsOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Modal dialog backed by the native `<dialog>` element. Uses `showModal()`
+ * for browser-managed focus trapping, supports backdrop and Escape dismissal,
+ * and exposes `header`, default, and `footer` content slots. The `open` state
+ * is a two-way `model()` binding.
+ */
 class DialogComponent {
     dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
@@ -2497,10 +2767,13 @@ class DialogComponent {
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    id = input(`ea-dialog-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way open binding
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires once the dialog has been shown via `showModal()`. */
     opened = output();
+    /** Fires when the dialog closes (via close button, backdrop, or Escape). */
     closed = output();
     // Computed
     panelClasses = computed(() => ({
@@ -2547,13 +2820,19 @@ class DialogComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, 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  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div class=\"ea-dialog__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-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div class=\"ea-dialog__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-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], 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        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-dialog__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
+        }], 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"] }] } });
 
+/**
+ * Side panel backed by the native `<dialog>` element for browser-managed
+ * focus trapping. Slides in from a configurable edge, supports backdrop and
+ * Escape dismissal, and exposes `header`, default, and `footer` content
+ * slots. The `open` state is a two-way `model()` binding.
+ */
 class DrawerComponent {
     drawerEl = viewChild('drawerEl', ...(ngDevMode ? [{ debugName: "drawerEl" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
@@ -2564,10 +2843,13 @@ class DrawerComponent {
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
     showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    id = input(`ea-drawer-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way open binding
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires once the drawer has been shown via `showModal()`. */
     opened = output();
+    /** Fires when the drawer closes (via close button, backdrop, or Escape). */
     closed = output();
     // Computed
     panelClasses = computed(() => ({
@@ -2615,13 +2897,19 @@ class DrawerComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, 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  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div class=\"ea-drawer__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-base);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div class=\"ea-drawer__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-base);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], 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        aria-label=\"Close drawer\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      class=\"ea-drawer__header\"\n      [id]=\"id() + '-header'\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-drawer__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-drawer__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent;overflow:hidden}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--color-bg-elevated);box-shadow:var(--shadow-2xl);overflow:hidden}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--right.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--right.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--right.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--right.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--left.ea-drawer__panel--sm{width:20rem}.ea-drawer__panel--left.ea-drawer__panel--md{width:28rem}.ea-drawer__panel--left.ea-drawer__panel--lg{width:36rem}.ea-drawer__panel--left.ea-drawer__panel--full{width:calc(100vw - 3rem)}.ea-drawer__panel--top{top:0;left:0;right:0;width:100%}.ea-drawer__panel--top.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--top.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--top.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--top.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__panel--bottom{bottom:0;left:0;right:0;width:100%}.ea-drawer__panel--bottom.ea-drawer__panel--sm{height:12rem}.ea-drawer__panel--bottom.ea-drawer__panel--md{height:20rem}.ea-drawer__panel--bottom.ea-drawer__panel--lg{height:28rem}.ea-drawer__panel--bottom.ea-drawer__panel--full{height:calc(100vh - 3rem)}.ea-drawer__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-drawer__close svg{width:1rem;height:1rem}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
+        }], 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"] }] } });
 
+/**
+ * Single-select dropdown with a custom popup list. Supports keyboard
+ * navigation (arrow keys, Enter/Space to select, Escape to close), closes
+ * on outside click or viewport scroll/resize, and integrates with Angular
+ * forms via `ControlValueAccessor`.
+ */
 class DropdownComponent {
     elRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "elRef" }] : /* istanbul ignore next */ []));
     menuEl = viewChild('menuEl', ...(ngDevMode ? [{ debugName: "menuEl" }] : /* istanbul ignore next */ []));
@@ -2632,13 +2920,15 @@ class DropdownComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     id = input(`ea-dropdown-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way value binding
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
+    /** Fires with the new value when the user selects an option. */
     changed = output();
     // Internal state
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -2649,16 +2939,16 @@ class DropdownComponent {
     onTouched = () => { };
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     selectedLabel = computed(() => {
         const opt = this.options().find(o => o.value === this.value());
         return opt?.label ?? '';
     }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     triggerClasses = computed(() => ({
         [`ea-dropdown__trigger--${this.size()}`]: true,
-        [`ea-dropdown__trigger--${this.resolvedStatus()}`]: true,
+        'ea-dropdown__trigger--error': this.hasError(),
         'ea-dropdown__trigger--open': this.isOpen(),
         'ea-dropdown__trigger--disabled': this.isDisabled(),
     }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
@@ -2701,8 +2991,9 @@ class DropdownComponent {
         this._formDisabled.set(isDisabled);
     }
     // Handlers
+    /** Toggles the dropdown list between open and closed. */
     toggle() {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         this.isOpen.set(!this.isOpen());
         if (this.isOpen()) {
@@ -2710,8 +3001,9 @@ class DropdownComponent {
             this.focusedIndex.set(idx >= 0 ? idx : 0);
         }
     }
+    /** Programmatically selects the given option, closing the list. */
     select(option) {
-        if (option.disabled || this.isDisabled())
+        if (option.disabled || this.isDisabled() || this.readonly())
             return;
         this.value.set(option.value);
         this.onChange(option.value);
@@ -2719,12 +3011,17 @@ class DropdownComponent {
         this.changed.emit(option.value);
         this.close();
     }
+    /** Closes the dropdown list without changing the current value. */
     close() {
         this.isOpen.set(false);
         this.focusedIndex.set(-1);
     }
+    /** Moves keyboard focus to the dropdown trigger. */
+    focus() {
+        this.elRef()?.nativeElement.focus();
+    }
     handleKeydown(event) {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         switch (event.key) {
             case 'Enter':
@@ -2786,13 +3083,13 @@ class DropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() : null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -2802,8 +3099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() : null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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: "error", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
+                    ], template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [id]=\"id() + '-label'\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        #menuEl\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:fixed;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -3184,6 +3481,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Branded eagami wordmark logo. Scales continuously from a single `size`
+ * pixel value and supports four content variants paired with stacked or
+ * inline layouts.
+ */
 class EagamiWordmarkComponent {
     variant = input(1, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
@@ -3218,20 +3520,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, template: "<a\n  class=\"ea-eagami-wordmark\"\n  [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n  href=\"https://eagami.com\"\n  target=\"_blank\"\n  rel=\"noopener\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ea-icon-eagami\n    class=\"ea-eagami-wordmark__logo\"\n    aria-hidden=\"true\" />\n\n  <span class=\"ea-eagami-wordmark__text\">\n    @if (showOverline()) {\n      <span class=\"ea-eagami-wordmark__overline\">handcrafted by</span>\n    }\n    <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n    @if (showTagline()) {\n      @if (layout() === 'inline') {\n        <span\n          class=\"ea-eagami-wordmark__separator\"\n          aria-hidden=\"true\">\n          \u2014\n        </span>\n      }\n      <span class=\"ea-eagami-wordmark__tagline\">elegant web design</span>\n    }\n  </span>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-block;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:hover{opacity:.75}.ea-eagami-wordmark:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1px)}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .2px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-widest);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * .5px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .1px)}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .5px)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+/**
+ * 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.
+ */
 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 */ []));
     hostClasses = computed(() => ({
         [`ea-empty-state--${this.size()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 } }, 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    <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\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(--color-text-tertiary)}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);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.9", 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(--color-text-tertiary)}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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    <h2 class=\"ea-empty-state__title\">{{ title() }}</h2>\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(--color-text-tertiary)}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);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 }] }] } });
+            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(--color-text-tertiary)}.ea-empty-state__media:empty{display:none}.ea-empty-state__title{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}.ea-empty-state__description{margin:0;line-height:var(--line-height-normal);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 }] }] } });
 
 class AlertTriangleIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertTriangleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3296,11 +3604,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class AppleIconComponent {
+    brand = input(false, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AppleIconComponent, isStandalone: true, selector: "ea-icon-apple", host: { styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppleIconComponent, isStandalone: true, selector: "ea-icon-apple", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "brand() ? '#000000' : null" }, styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#000000"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -3314,11 +3623,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'ea-icon-apple',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-flex; width: 1em; height: 1em;' },
+                    host: {
+                        style: 'display: inline-flex; width: 1em; height: 1em;',
+                        '[style.color]': "brand() ? '#000000' : null",
+                    },
                     template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#000000"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -3327,7 +3639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </svg>
   `,
                 }]
-        }] });
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
 
 class ArrowLeftIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ArrowLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3860,11 +4172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class FacebookIconComponent {
+    brand = input(false, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FacebookIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: FacebookIconComponent, isStandalone: true, selector: "ea-icon-facebook", host: { styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FacebookIconComponent, isStandalone: true, selector: "ea-icon-facebook", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "brand() ? '#1877F2' : null" }, styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#1877F2"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -3878,11 +4191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'ea-icon-facebook',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-flex; width: 1em; height: 1em;' },
+                    host: {
+                        style: 'display: inline-flex; width: 1em; height: 1em;',
+                        '[style.color]': "brand() ? '#1877F2' : null",
+                    },
                     template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#1877F2"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -3891,7 +4207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </svg>
   `,
                 }]
-        }] });
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
 
 class FileIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3976,11 +4292,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class GithubIconComponent {
+    brand = input(false, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GithubIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: GithubIconComponent, isStandalone: true, selector: "ea-icon-github", host: { styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: GithubIconComponent, isStandalone: true, selector: "ea-icon-github", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "brand() ? '#181717' : null" }, styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#181717"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -3994,11 +4311,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'ea-icon-github',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-flex; width: 1em; height: 1em;' },
+                    host: {
+                        style: 'display: inline-flex; width: 1em; height: 1em;',
+                        '[style.color]': "brand() ? '#181717' : null",
+                    },
                     template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#181717"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -4007,7 +4327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </svg>
   `,
                 }]
-        }] });
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
 
 class GoogleIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4874,11 +5194,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class XTwitterIconComponent {
+    brand = input(false, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: XTwitterIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: XTwitterIconComponent, isStandalone: true, selector: "ea-icon-x-twitter", host: { styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: XTwitterIconComponent, isStandalone: true, selector: "ea-icon-x-twitter", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "brand() ? '#000000' : null" }, styleAttribute: "display: inline-flex; width: 1em; height: 1em;" }, ngImport: i0, template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#000000"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -4892,11 +5213,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'ea-icon-x-twitter',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-flex; width: 1em; height: 1em;' },
+                    host: {
+                        style: 'display: inline-flex; width: 1em; height: 1em;',
+                        '[style.color]': "brand() ? '#000000' : null",
+                    },
                     template: `
     <svg
       viewBox="0 0 24 24"
-      fill="#000000"
+      fill="currentColor"
       aria-hidden="true"
       width="100%"
       height="100%">
@@ -4905,8 +5229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </svg>
   `,
                 }]
-        }] });
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
 
+/**
+ * Single-line text field with label, hint, and error message support.
+ * Includes a built-in show/hide toggle for `password` inputs and integrates
+ * with Angular forms via `ControlValueAccessor`. Prefix and suffix content
+ * can be projected via the `prefix` and `suffix` slots.
+ */
 class InputComponent {
     inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     // Inputs
@@ -4914,9 +5244,8 @@ class InputComponent {
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
@@ -4927,25 +5256,27 @@ class InputComponent {
     // Two-way value binding
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Internal state
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Outputs
-    inputFocused = output();
-    inputBlurred = output();
+    /** Fires when the input receives focus. */
+    focused = output();
+    /** Fires when the input loses focus. */
+    blurred = output();
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     effectiveType = computed(() => this.type() === 'password' && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     wrapperClasses = computed(() => ({
         [`ea-input-wrapper--${this.size()}`]: true,
-        [`ea-input-wrapper--${this.resolvedStatus()}`]: true,
-        'ea-input-wrapper--focused': this.focused(),
+        'ea-input-wrapper--error': this.hasError(),
+        'ea-input-wrapper--focused': this.isFocused(),
         'ea-input-wrapper--disabled': this.isDisabled(),
         'ea-input-wrapper--readonly': this.readonly(),
     }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
@@ -4973,28 +5304,30 @@ class InputComponent {
         this.onChange(value);
     }
     handleFocus(event) {
-        this.focused.set(true);
-        this.inputFocused.emit(event);
+        this.isFocused.set(true);
+        this.focused.emit(event);
     }
     handleBlur(event) {
-        this.focused.set(false);
+        this.isFocused.set(false);
         this.onTouched();
-        this.inputBlurred.emit(event);
+        this.blurred.emit(event);
     }
+    /** Toggles the password reveal state for `type="password"` inputs. */
     togglePasswordVisibility() {
         this.passwordVisible.update(value => !value);
     }
+    /** Moves keyboard focus to the underlying native input element. */
     focus() {
         this.inputEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", 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", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", 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()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -5004,19 +5337,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
-        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocused: [{ type: i0.Output, args: ["inputFocused"] }], inputBlurred: [{ type: i0.Output, args: ["inputBlurred"] }] } });
+                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
+/**
+ * Popup action menu attached to any focusable element via the
+ * `[eaMenuTrigger]` directive. Supports keyboard navigation
+ * (arrow keys, Home/End), closes on outside click or Escape, and restores
+ * focus to the trigger on close.
+ */
 class MenuComponent {
-    elRef = inject((ElementRef));
+    injector = inject(Injector);
     listEl = viewChild('listEl', ...(ngDevMode ? [{ debugName: "listEl" }] : /* istanbul ignore next */ []));
     placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Menu', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    id = input(`ea-menu-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Fires when the menu opens. */
     opened = output();
+    /** Fires when the menu closes. */
     closed = output();
-    menuId = signal(`ea-menu-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
     triggerEl = null;
     triggerRect = signal(null, ...(ngDevMode ? [{ debugName: "triggerRect" }] : /* istanbul ignore next */ []));
     listClasses = computed(() => ({
@@ -5043,6 +5384,7 @@ class MenuComponent {
         }
         return style;
     }, ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
+    /** Toggles the menu open state, anchoring it to the given trigger element. */
     toggleAt(triggerEl) {
         if (this.disabled())
             return;
@@ -5053,6 +5395,7 @@ class MenuComponent {
             this.openAt(triggerEl);
         }
     }
+    /** Opens the menu anchored to the given trigger element and focuses the first item. */
     openAt(triggerEl) {
         if (this.disabled())
             return;
@@ -5060,12 +5403,62 @@ class MenuComponent {
         this.triggerRect.set(triggerEl.getBoundingClientRect());
         this.open.set(true);
         this.opened.emit();
-    }
-    close() {
+        afterNextRender(() => this.focusFirstItem(), { injector: this.injector });
+    }
+    /**
+     * Closes the menu if it is open. Pass `restoreFocus: true` to return focus
+     * to the trigger element (used when closing via Escape or item activation;
+     * not used on outside click, where the user has chosen a new focus target).
+     */
+    close(restoreFocus = false) {
         if (!this.open())
             return;
         this.open.set(false);
         this.closed.emit();
+        if (restoreFocus)
+            this.triggerEl?.focus();
+    }
+    getEnabledItems() {
+        const list = this.listEl()?.nativeElement;
+        if (!list)
+            return [];
+        return Array.from(list.querySelectorAll('[role="menuitem"]:not([disabled])'));
+    }
+    focusFirstItem() {
+        this.getEnabledItems()[0]?.focus();
+    }
+    onKeydown(event) {
+        if (!this.open())
+            return;
+        const list = this.listEl()?.nativeElement;
+        const active = document.activeElement;
+        if (!list || !active || !list.contains(active))
+            return;
+        const items = this.getEnabledItems();
+        if (items.length === 0)
+            return;
+        const current = items.indexOf(active);
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                next = current < items.length - 1 ? current + 1 : 0;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                next = current > 0 ? current - 1 : items.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                next = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                next = items.length - 1;
+                break;
+        }
+        if (next >= 0)
+            items[next].focus();
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -5080,8 +5473,7 @@ class MenuComponent {
     onEscape() {
         if (!this.open())
             return;
-        this.close();
-        this.triggerEl?.focus();
+        this.close(true);
     }
     onViewportChange() {
         if (!this.open() || !this.triggerEl)
@@ -5089,12 +5481,15 @@ class MenuComponent {
         this.triggerRect.set(this.triggerEl.getBoundingClientRect());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"menuId()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-menu', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"menuId()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"] }]
-        }], propDecorators: { listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], 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"] }], onDocumentClick: [{
+            args: [{ selector: 'ea-menu', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div\n    #listEl\n    class=\"ea-menu__list\"\n    role=\"menu\"\n    [id]=\"id()\"\n    [ngClass]=\"listClasses()\"\n    [style]=\"listStyle()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.ea-menu__list{position:fixed;z-index:var(--z-index-dropdown);min-width:10rem;max-height:20rem;padding:var(--space-1) 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-base)}\n"] }]
+        }], propDecorators: { listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
@@ -5108,30 +5503,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['window:scroll']
             }] } });
 
+/**
+ * Selectable row inside an `ea-menu`. Supports leading icons via the `icon`
+ * content slot, a disabled state, and a `danger` variant for destructive
+ * actions. Activating an item closes its parent menu.
+ */
 class MenuItemComponent {
     menu = inject(MenuComponent, { optional: true });
     // Inputs
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     // Outputs
-    itemClicked = output();
+    /** Fires when the item is activated; the parent menu closes immediately afterwards. */
+    clicked = output();
     handleClick(event) {
         if (this.disabled()) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
-        this.itemClicked.emit(event);
-        this.menu?.close();
+        this.clicked.emit(event);
+        this.menu?.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MenuItemComponent, isStandalone: true, selector: "ea-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ea-menu-item\"\n  role=\"menuitem\"\n  [class.ea-menu-item--disabled]=\"disabled()\"\n  [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\">\n  <span class=\"ea-menu-item__icon\">\n    <ng-content select=\"[slot=icon]\" />\n  </span>\n  <span class=\"ea-menu-item__label\">\n    <ng-content />\n  </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);text-align:left;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-bg-muted)}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1rem;height:1rem;color:inherit}.ea-menu-item__icon>*{width:1rem;height:1rem}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MenuItemComponent, isStandalone: true, selector: "ea-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ea-menu-item\"\n  role=\"menuitem\"\n  [class.ea-menu-item--disabled]=\"disabled()\"\n  [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\">\n  <span class=\"ea-menu-item__icon\">\n    <ng-content select=\"[slot=icon]\" />\n  </span>\n  <span class=\"ea-menu-item__label\">\n    <ng-content />\n  </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);text-align:left;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-bg-muted)}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1rem;height:1rem;color:inherit}.ea-menu-item__icon>*{width:1rem;height:1rem}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"ea-menu-item\"\n  role=\"menuitem\"\n  [class.ea-menu-item--disabled]=\"disabled()\"\n  [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\">\n  <span class=\"ea-menu-item__icon\">\n    <ng-content select=\"[slot=icon]\" />\n  </span>\n  <span class=\"ea-menu-item__label\">\n    <ng-content />\n  </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);text-align:left;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-bg-muted)}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1rem;height:1rem;color:inherit}.ea-menu-item__icon>*{width:1rem;height:1rem}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * Wires a focusable host element (typically a button) to an `ea-menu`,
+ * handling click and keyboard activation (ArrowDown/Enter/Space to open,
+ * Escape to close) and applying the appropriate ARIA attributes.
+ */
 class MenuTriggerDirective {
     el = inject((ElementRef));
     menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'eaMenuTrigger' });
@@ -5156,7 +5562,7 @@ class MenuTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "menu()?.open() ?? false", "attr.aria-controls": "menu()?.menuId() ?? null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "menu()?.open() ?? false", "attr.aria-controls": "menu()?.id() ?? null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuTriggerDirective, decorators: [{
             type: Directive,
@@ -5165,22 +5571,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.aria-haspopup]': '"menu"',
                         '[attr.aria-expanded]': 'menu()?.open() ?? false',
-                        '[attr.aria-controls]': 'menu()?.menuId() ?? null',
+                        '[attr.aria-controls]': 'menu()?.id() ?? null',
                         '(click)': 'handleClick()',
                         '(keydown)': 'handleKeydown($event)',
                     },
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
 
+/**
+ * Page navigation control with previous/next buttons, numbered page jumps,
+ * an optional page-size selector, and a range label. Exposes `page` and
+ * `pageSize` as two-way `model()` bindings and emits a single `changed`
+ * event whenever either changes.
+ */
 class PaginatorComponent {
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     showPageSizeSelector = input(true, ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : /* istanbul ignore next */ []));
     showRangeLabel = input(true, ...(ngDevMode ? [{ debugName: "showRangeLabel" }] : /* istanbul ignore next */ []));
-    placement = input('right', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Fires when the user changes either the current page or the page size. */
     changed = output();
     totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     rangeStart = computed(() => this.totalItems() === 0 ? 0 : (this.page() - 1) * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
@@ -5211,6 +5624,7 @@ class PaginatorComponent {
         pages.push(total);
         return pages;
     }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
+    /** Navigates to the given page, clamped into the valid range. */
     goToPage(page) {
         if (this.disabled())
             return;
@@ -5220,10 +5634,12 @@ class PaginatorComponent {
         this.page.set(clamped);
         this.changed.emit({ page: clamped, pageSize: this.pageSize() });
     }
+    /** Navigates to the previous page if one exists. */
     prevPage() {
         if (this.canGoPrev())
             this.goToPage(this.page() - 1);
     }
+    /** Navigates to the next page if one exists. */
     nextPage() {
         if (this.canGoNext())
             this.goToPage(this.page() + 1);
@@ -5237,19 +5653,24 @@ class PaginatorComponent {
         this.changed.emit({ page: 1, pageSize: newSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", 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]=\"placement() === 'left'\"\n  [class.ea-paginator--center]=\"placement() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"placement() === 'left'\"\n  [class.ea-paginator--center]=\"placement() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
-        }], 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 }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+            args: [{ selector: 'ea-paginator', imports: [ButtonComponent, ChevronLeftIconComponent, ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  aria-label=\"Pagination\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        for=\"ea-paginator-size\">\n        Rows per page:\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        id=\"ea-paginator-size\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (size of pageSizeOptions(); track size) {\n          <option\n            [value]=\"size\"\n            [selected]=\"size === pageSize()\">\n            {{ size }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span class=\"ea-paginator__range\">\n      {{ rangeStart() }}\u2013{{ rangeEnd() }} of {{ totalItems() }}\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      aria-label=\"Previous page\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span class=\"ea-paginator__ellipsis\">\u2026</span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          size=\"sm\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ p }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      aria-label=\"Next page\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:var(--space-2)}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding:var(--space-1) calc(var(--space-2) + 1rem) var(--space-1) var(--space-2);font-size:var(--font-size-sm);font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:var(--space-1)}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1rem;height:1rem}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
+        }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+/**
+ * Linear progress indicator supporting both determinate (driven by `value`
+ * and `max`) and indeterminate modes. Optionally renders an inline label
+ * and/or the current percentage.
+ */
 class ProgressBarComponent {
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     percentage = computed(() => {
@@ -5265,28 +5686,42 @@ class ProgressBarComponent {
         'ea-progress-bar--indeterminate': this.indeterminate(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
+            args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-progress-bar\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-progress-bar__header\">\n      @if (label()) {\n        <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n      }\n      @if (showValue() && !indeterminate()) {\n        <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n      }\n    </div>\n  }\n  <div\n    class=\"ea-progress-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-busy]=\"indeterminate() || null\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div\n      class=\"ea-progress-bar__fill\"\n      [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n  </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
         }], 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 }] }] } });
 
+/**
+ * Composite single-select control made up of `ea-radio` children. Manages
+ * shared state (name, size, disabled) for its options and integrates with
+ * Angular forms via `ControlValueAccessor`.
+ */
 class RadioGroupComponent {
     // Inputs
+    id = input(`ea-radio-group-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     name = input(`ea-radio-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     // Two-way value binding
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Output
+    /** Fires with the new value when an option is selected. */
     changed = output();
     // Internal state
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Computed
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
@@ -5303,6 +5738,7 @@ class RadioGroupComponent {
     setDisabledState(isDisabled) {
         this._formDisabled.set(isDisabled);
     }
+    /** Programmatically selects the option with the given value. */
     select(val) {
         if (this.isDisabled())
             return;
@@ -5312,13 +5748,13 @@ class RadioGroupComponent {
         this.changed.emit(val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"ea-radio-group\"\n  [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -5328,9 +5764,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => RadioGroupComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-radio-group\"\n  [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+                    ], template: "<div class=\"ea-radio-group-field\">\n  @if (label()) {\n    <span\n      class=\"ea-radio-group-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-radio-group-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-radio-group\"\n    [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n    [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n    role=\"radiogroup\"\n    [id]=\"id()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    <ng-content />\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-radio-group-field__message ea-radio-group-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-radio-group-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-radio-group-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-radio-group-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-radio-group-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-radio-group-field__message--hint{color:var(--color-text-secondary)}.ea-radio-group-field__message--error{color:var(--color-error-default)}.ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+/**
+ * Single radio option used inside an `ea-radio-group`. Inherits its size and
+ * disabled state from the parent group and selecting it updates the group's
+ * value.
+ */
 class RadioComponent {
     group = inject(RadioGroupComponent);
     // Inputs
@@ -5361,25 +5802,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             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:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+/**
+ * Compact toggle button group for picking one of a small set of options
+ * (e.g. List/Grid/Kanban or Light/Dark). Implements `radiogroup` semantics
+ * and `ControlValueAccessor`, with full keyboard support
+ * (arrow keys, Home/End, Enter/Space).
+ */
 class SegmentedComponent {
     buttonEls = viewChildren('optionEl', ...(ngDevMode ? [{ debugName: "buttonEls" }] : /* istanbul ignore next */ []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     id = input(`ea-segmented-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new value when the user selects a different option. */
     changed = output();
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     enabledOptions = computed(() => this.options().filter(opt => !opt.disabled), ...(ngDevMode ? [{ debugName: "enabledOptions" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-segmented--${this.size()}`]: true,
         'ea-segmented--full-width': this.fullWidth(),
         'ea-segmented--disabled': this.isDisabled(),
+        'ea-segmented--error': this.hasError(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     writeValue(val) {
         this.value.set(val ?? '');
@@ -5399,6 +5855,7 @@ class SegmentedComponent {
     isOptionDisabled(option) {
         return this.isDisabled() || !!option.disabled;
     }
+    /** Programmatically selects the given option. */
     select(option) {
         if (this.isOptionDisabled(option))
             return;
@@ -5461,13 +5918,13 @@ class SegmentedComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SegmentedComponent, isStandalone: true, selector: "ea-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SegmentedComponent, isStandalone: true, selector: "ea-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SegmentedComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-segmented\"\n  role=\"radiogroup\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-disabled]=\"isDisabled() || null\">\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", styles: [".ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "buttonEls", predicate: ["optionEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SegmentedComponent, decorators: [{
             type: Component,
@@ -5477,14 +5934,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => SegmentedComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-segmented\"\n  role=\"radiogroup\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-disabled]=\"isDisabled() || null\">\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", styles: [".ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
-        }], propDecorators: { buttonEls: [{ type: i0.ViewChildren, args: ['optionEl', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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"] }] } });
+                    ], template: "<div class=\"ea-segmented-field\">\n  @if (label()) {\n    <span\n      class=\"ea-segmented-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-segmented-field__label--required]=\"required()\">\n      {{ label() }}\n    </span>\n  }\n\n  <div\n    class=\"ea-segmented\"\n    role=\"radiogroup\"\n    [ngClass]=\"hostClasses()\"\n    [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n    [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n    [attr.aria-required]=\"required() || null\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-describedby]=\"\n      showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n    \">\n    @for (option of options(); track option.value; let i = $index) {\n      <button\n        #optionEl\n        type=\"button\"\n        class=\"ea-segmented__option\"\n        role=\"radio\"\n        [class.ea-segmented__option--selected]=\"isSelected(option)\"\n        [class.ea-segmented__option--disabled]=\"isOptionDisabled(option)\"\n        [attr.aria-checked]=\"isSelected(option)\"\n        [attr.aria-disabled]=\"isOptionDisabled(option) || null\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [attr.tabindex]=\"isSelected(option) || (!value() && i === 0) ? 0 : -1\"\n        (click)=\"select(option)\"\n        (keydown)=\"handleKeydown($event, i)\">\n        {{ option.label }}\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-segmented-field__message ea-segmented-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-segmented-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-segmented-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-segmented-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-segmented-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-segmented-field__message--hint{color:var(--color-text-secondary)}.ea-segmented-field__message--error{color:var(--color-error-default)}.ea-segmented{display:inline-flex;flex-direction:row;padding:var(--space-0-5);background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans)}.ea-segmented--full-width{display:flex;width:100%}.ea-segmented--full-width .ea-segmented__option{flex:1}.ea-segmented--disabled{opacity:.5;cursor:not-allowed}.ea-segmented--error{border-color:var(--color-error-default)}.ea-segmented--sm .ea-segmented__option{min-height:1.75rem;padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-segmented--md .ea-segmented__option{min-height:2.25rem;padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-md)}.ea-segmented--lg .ea-segmented__option{min-height:2.75rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-md)}.ea-segmented__option{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);background:transparent;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-segmented__option:hover:not(.ea-segmented__option--selected):not(.ea-segmented__option--disabled){color:var(--color-text-primary);background-color:var(--color-bg-subtle)}.ea-segmented__option:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-segmented__option--selected{background-color:var(--color-bg-base);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.ea-segmented__option--disabled{cursor:not-allowed}\n"] }]
+        }], 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"] }] } });
 
+/**
+ * Single-value range input controlled with pointer drag or full keyboard
+ * navigation (arrows, PageUp/PageDown, Home/End). Supports configurable
+ * `min`, `max`, and `step`, optional value display, and integrates with
+ * Angular forms via `ControlValueAccessor`.
+ */
 class SliderComponent {
     trackEl = viewChild('trackEl', ...(ngDevMode ? [{ debugName: "trackEl" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
@@ -5497,6 +5960,7 @@ class SliderComponent {
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     id = input(`ea-slider-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires with the new (snapped, clamped) numeric value whenever the slider moves. */
     changed = output();
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -5513,12 +5977,12 @@ class SliderComponent {
             return 0;
         return ((this.clampedValue() - this.min()) / range) * 100;
     }, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-slider--${this.size()}`]: true,
-        [`ea-slider--${this.resolvedStatus()}`]: true,
+        'ea-slider--error': this.hasError(),
         'ea-slider--disabled': this.isDisabled(),
         'ea-slider--dragging': this.dragging(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
@@ -5616,13 +6080,13 @@ class SliderComponent {
         this.changed.emit(rounded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SliderComponent, isStandalone: true, selector: "ea-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SliderComponent, isStandalone: true, selector: "ea-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <label\n      class=\"ea-slider-field__label\"\n      [for]=\"id()\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </label>\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-label]=\"ariaLabel() ?? label()\"\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-invalid]=\"resolvedStatus() === 'error' || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -5632,9 +6096,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <label\n      class=\"ea-slider-field__label\"\n      [for]=\"id()\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </label>\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-label]=\"ariaLabel() ?? label()\"\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-invalid]=\"resolvedStatus() === 'error' || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
-        }], 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: "error", 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"] }] } });
+                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label()) {\n    <span\n      class=\"ea-slider-field__label\"\n      [id]=\"id() + '-label'\"\n      [class.ea-slider-field__label--required]=\"required()\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">{{ formatValue()(clampedValue()) }}</span>\n      }\n    </span>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatValue()(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.left.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(min()) }}</span>\n        <span class=\"ea-slider__minmax-label\">{{ formatValue()(max()) }}</span>\n      </div>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-slider-field__message ea-slider-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-slider-field__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-slider-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-slider-field__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-slider-field__message--hint{color:inherit}.ea-slider-field__message--error{color:var(--color-error-default)}.ea-slider{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ea-slider--sm .ea-slider .ea-slider__track{height:.25rem}.ea-slider--sm .ea-slider .ea-slider__thumb{width:.875rem;height:.875rem}.ea-slider--md .ea-slider .ea-slider__track{height:.375rem}.ea-slider--md .ea-slider .ea-slider__thumb{width:1.125rem;height:1.125rem}.ea-slider--lg .ea-slider .ea-slider__track{height:.5rem}.ea-slider--lg .ea-slider .ea-slider__thumb{width:1.375rem;height:1.375rem}.ea-slider__track{position:relative;width:100%;background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}.ea-slider__thumb{position:absolute;top:50%;background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:grab;transform:translate(-50%,-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring);outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:var(--space-1)}.ea-slider__minmax-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}\n"] }]
+        }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+/**
+ * SVG loading indicator with an accessible `role="status"`. Uses the `label`
+ * input as the accessible name announced to assistive technology.
+ */
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input('Loading', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -5642,29 +6110,42 @@ class SpinnerComponent {
         [`ea-spinner--${this.size()}`]: true,
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.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\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * On/off toggle styled as a sliding switch. Backed by a visually hidden
+ * native checkbox and integrates with Angular forms via
+ * `ControlValueAccessor`.
+ */
 class SwitchComponent {
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     id = input(`ea-switch-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Fires with the new checked state whenever the user toggles the switch. */
     changed = output();
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-switch--${this.size()}`]: true,
         'ea-switch--checked': this.checked(),
         'ea-switch--disabled': this.isDisabled(),
+        'ea-switch--error': this.hasError(),
     }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     writeValue(val) {
         this.checked.set(!!val);
@@ -5688,13 +6169,13 @@ class SwitchComponent {
         this.changed.emit(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SwitchComponent, isStandalone: true, selector: "ea-switch", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SwitchComponent, isStandalone: true, selector: "ea-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SwitchComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<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    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"!label() ? ariaLabel() : null\"\n    (change)=\"handleChange()\" />\n  <span class=\"ea-switch__track\">\n    <span class=\"ea-switch__thumb\"></span>\n  </span>\n  @if (label()) {\n    <span class=\"ea-switch__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -5704,24 +6185,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => SwitchComponent),
                             multi: true,
                         },
-                    ], template: "<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    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"!label() ? ariaLabel() : null\"\n    (change)=\"handleChange()\" />\n  <span class=\"ea-switch__track\">\n    <span class=\"ea-switch__thumb\"></span>\n  </span>\n  @if (label()) {\n    <span class=\"ea-switch__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+                    ], template: "<div class=\"ea-switch-field\">\n  <label\n    class=\"ea-switch\"\n    [ngClass]=\"hostClasses()\">\n    <input\n      class=\"ea-switch__input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (change)=\"handleChange()\" />\n    <span class=\"ea-switch__track\">\n      <span class=\"ea-switch__thumb\"></span>\n    </span>\n    @if (label()) {\n      <span\n        class=\"ea-switch__label\"\n        [class.ea-switch__label--required]=\"required()\">\n        {{ label() }}\n      </span>\n    }\n  </label>\n\n  @if (showError()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-switch-field__message ea-switch-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-switch-field{display:inline-flex;flex-direction:column;gap:var(--space-1-5)}.ea-switch-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-switch-field__message--hint{color:var(--color-text-secondary)}.ea-switch-field__message--error{color:var(--color-error-default)}.ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}.ea-switch__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-switch--error .ea-switch__track{border-color:var(--color-error-default)}\n"] }]
+        }], 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"] }] } });
 
+/**
+ * Tab bar paired with content panels. Child `ea-tab` components register
+ * themselves automatically and the active panel is shown based on the
+ * `activeTab` two-way binding. Supports keyboard navigation
+ * (arrow keys, Home/End).
+ */
 class TabsComponent {
     registeredTabs = signal([], ...(ngDevMode ? [{ debugName: "registeredTabs" }] : /* istanbul ignore next */ []));
     variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    tabChange = output();
+    /** Fires with the value of the newly active tab. */
+    changed = output();
+    /** Registers a child tab so it appears in the tab bar; called automatically by `ea-tab`. */
     registerTab(tab) {
         this.registeredTabs.update(tabs => [...tabs, tab]);
     }
+    /** Removes a previously registered child tab; called automatically by `ea-tab`. */
     unregisterTab(tab) {
         this.registeredTabs.update(tabs => tabs.filter(t => t !== tab));
     }
+    /** Programmatically activates the tab with the given value. */
     selectTab(value) {
         this.activeTab.set(value);
-        this.tabChange.emit(value);
+        this.changed.emit(value);
     }
     handleKeydown(event) {
         const tabList = this.registeredTabs().filter(t => !t.disabled());
@@ -5751,13 +6242,18 @@ class TabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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", tabChange: "tabChange" }, 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-primary-600);color:var(--color-primary-600)}.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.9", 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-primary-600);color:var(--color-primary-600)}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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-primary-600);color:var(--color-primary-600)}.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"] }]
-        }], 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"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+        }], 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"] }] } });
 
+/**
+ * Single tab within an `ea-tabs` group. Registers itself with the parent on
+ * init, exposes its `value` and `label`, and shows its projected content
+ * when active.
+ */
 class TabComponent {
     tabs = inject(TabsComponent);
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -5806,11 +6302,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+/**
+ * Inline label commonly used to represent filters, categories, or selected
+ * items. When `removable`, renders a close button that emits `removed`; the
+ * accessible name of that button is configurable via `removeLabel`.
+ */
 class TagComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    removeLabel = input('Remove', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** Fires when the user activates the remove button on a `removable` tag. */
     removed = output();
     hostClasses = computed(() => ({
         [`ea-tag--${this.variant()}`]: true,
@@ -5822,21 +6325,25 @@ class TagComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, 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      (click)=\"onRemove($event)\"\n      aria-label=\"Remove\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--primary{border-color:var(--color-brand-muted);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      (click)=\"onRemove($event)\"\n      aria-label=\"Remove\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--primary{border-color:var(--color-brand-muted);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
+/**
+ * Multiline text field that mirrors the `ea-input` API. Supports configurable
+ * `rows`, `resize` direction, and `maxlength`, and integrates with Angular
+ * forms via `ControlValueAccessor`.
+ */
 class TextareaComponent {
     textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    errorMsg = input(undefined, ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
@@ -5845,20 +6352,22 @@ class TextareaComponent {
     maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
     id = input(`ea-textarea-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
-    textareaFocused = output();
-    textareaBlurred = output();
+    /** Fires when the textarea receives focus. */
+    focused = output();
+    /** Fires when the textarea loses focus. */
+    blurred = output();
     onChange = () => { };
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    showError = this.hasError;
+    showHint = computed(() => !!this.hint() && !this.hasError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     wrapperClasses = computed(() => ({
         [`ea-textarea-wrapper--${this.size()}`]: true,
-        [`ea-textarea-wrapper--${this.resolvedStatus()}`]: true,
-        'ea-textarea-wrapper--focused': this.focused(),
+        'ea-textarea-wrapper--error': this.hasError(),
+        'ea-textarea-wrapper--focused': this.isFocused(),
         'ea-textarea-wrapper--disabled': this.isDisabled(),
         'ea-textarea-wrapper--readonly': this.readonly(),
     }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
@@ -5880,25 +6389,26 @@ class TextareaComponent {
         this.onChange(value);
     }
     handleFocus(event) {
-        this.focused.set(true);
-        this.textareaFocused.emit(event);
+        this.isFocused.set(true);
+        this.focused.emit(event);
     }
     handleBlur(event) {
-        this.focused.set(false);
+        this.isFocused.set(false);
         this.onTouched();
-        this.textareaBlurred.emit(event);
+        this.blurred.emit(event);
     }
+    /** Moves keyboard focus to the underlying native textarea element. */
     focus() {
         this.textareaEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", 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 }, 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", textareaFocused: "textareaFocused", textareaBlurred: "textareaBlurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, 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()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--success{border-color:var(--color-success-default)}.ea-textarea-wrapper--success.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -5908,12 +6418,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--success{border-color:var(--color-success-default)}.ea-textarea-wrapper--success.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.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 }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textareaFocused: [{ type: i0.Output, args: ["textareaFocused"] }], textareaBlurred: [{ type: i0.Output, args: ["textareaBlurred"] }] } });
+                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
+/**
+ * Application-wide notification service. Use the convenience methods
+ * (`success`, `error`, `warning`, `info`) to push a toast, or call
+ * {@link show} for full control. A single `<ea-toast />` outlet must be
+ * present in the app for toasts to appear.
+ */
 class ToastService {
     nextId = 0;
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    /** Shows a toast and returns its id; pass `duration: 0` to disable auto-dismiss. */
     show(message, options = {}) {
         const id = this.nextId++;
         const toast = {
@@ -5928,21 +6445,27 @@ class ToastService {
         }
         return id;
     }
+    /** Shows a `success` toast and returns its id. */
     success(message, duration) {
         return this.show(message, { variant: 'success', duration });
     }
+    /** Shows an `error` toast and returns its id. */
     error(message, duration) {
         return this.show(message, { variant: 'error', duration });
     }
+    /** Shows a `warning` toast and returns its id. */
     warning(message, duration) {
         return this.show(message, { variant: 'warning', duration });
     }
+    /** Shows an `info` toast and returns its id. */
     info(message, duration) {
         return this.show(message, { variant: 'info', duration });
     }
+    /** Removes the toast with the given id, if it is still active. */
     dismiss(id) {
         this.toasts.update(list => list.filter(t => t.id !== id));
     }
+    /** Removes all currently visible toasts. */
     clear() {
         this.toasts.set([]);
     }
@@ -5954,14 +6477,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Outlet that renders the stack of active toasts produced by
+ * {@link ToastService}. Place a single `<ea-toast />` once in the root
+ * template so toasts created from anywhere in the app are surfaced.
+ */
 class ToastComponent {
     toastService = inject(ToastService);
+    getRole(toast) {
+        return toast.variant === 'error' || toast.variant === 'warning' ? 'alert' : 'status';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        role=\"status\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        [attr.role]=\"getRole(toast)\"\n        [attr.aria-live]=\"getRole(toast) === 'alert' ? 'assertive' : 'polite'\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div\n    class=\"ea-toast-container\"\n    aria-live=\"polite\"\n    aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        role=\"status\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\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          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"] }]
         }] });
 
 // =============================================================================