@eagami/ui 5.21.0 → 5.22.1

package/fesm2022/eagami-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID, afterRenderEffect } from '@angular/core';
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -4228,13 +4228,19 @@ function controlErrorStateFrom(control, config) {
  * `afterNextRender` defers resolution to the browser, after the host directive
  * (`formControl` / `ngModel`) exists, so the server render simply shows no
  * error (an untouched control never does).
+ *
+ * The lookup is `self`-scoped to the host element. Without it the search walks
+ * up the element injectors, so a field rendered inside another bound field
+ * (the checkboxes in a multi-select's option list, say) would adopt the outer
+ * control and repeat its error message on every row.
  */
 function injectControlErrorState(config) {
     const injector = inject(Injector);
     const control = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     afterNextRender(() => {
-        control.set(injector.get(NgControl, null)?.control ?? null);
+        const ngControl = injector.get(NgControl, null, { self: true, optional: true });
+        control.set(ngControl?.control ?? null);
     }, { injector });
     return controlErrorStateFrom(control, config);
 }
@@ -4497,6 +4503,7 @@ function computePopoverPosition(anchorRect, popoverRect, viewport, options) {
         top: pos.top,
         left: pos.left,
         placement,
+        anchorWidth: anchorRect.width,
         ...(options.matchAnchorWidth ? { width: anchorRect.width } : {}),
     };
 }
@@ -4561,6 +4568,12 @@ class PopoverComponent {
     /** Set the popover's `min-width` to match the anchor's width (dropdown pattern). */
     matchAnchorWidth = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "matchAnchorWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Widest the surface may grow: a px value, or `anchor` to cap it at the
+     * anchor's own width so long content truncates instead of widening the panel.
+     */
+    maxWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     /** Close on click outside the popover and the anchor. */
     closeOnOutsideClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
@@ -4605,6 +4618,10 @@ class PopoverComponent {
         if (p.width !== undefined) {
             style['min-width'] = `${p.width}px`;
         }
+        const cap = this.maxWidth();
+        if (cap !== undefined) {
+            style['max-width'] = `${cap === 'anchor' ? p.anchorWidth : cap}px`;
+        }
         return style;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surfaceStyle" }] : /* istanbul ignore next */ []));
@@ -4858,7 +4875,7 @@ class PopoverComponent {
         this.closeRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -4867,7 +4884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                     }, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { surfaceEl: [{ type: i0.ViewChild, args: ['surfaceEl', { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], matchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchAnchorWidth", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], onDocumentClick: [{
+        }], ctorParameters: () => [], propDecorators: { surfaceEl: [{ type: i0.ViewChild, args: ['surfaceEl', { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], matchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchAnchorWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
@@ -5100,7 +5117,7 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #anchorEl\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      dir=\"auto\"\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-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-expanded]=\"showList()\"\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  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <div\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]=\"option.label === value()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.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)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:var(--space-1) 0;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(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    #anchorEl\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      dir=\"auto\"\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-label]=\"label() ? null : ariaLabel()\"\n      [attr.aria-expanded]=\"showList()\"\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  <ea-popover\n    [anchor]=\"anchorEl\"\n    [open]=\"showList()\"\n    placement=\"bottom-start\"\n    role=\"listbox\"\n    [aria-label]=\"label() ?? ariaLabel()\"\n    [surfaceId]=\"id() + '-listbox'\"\n    [matchAnchorWidth]=\"true\"\n    [closeOnEscape]=\"false\"\n    scrollBehavior=\"close\"\n    (closeRequested)=\"close()\">\n    <div\n      class=\"ea-autocomplete__listbox\"\n      [ngClass]=\"listboxClasses()\">\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <div\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]=\"option.label === value()\"\n          [attr.aria-disabled]=\"option.disabled || null\"\n          (mousedown)=\"selectOption(option)\"\n          (mouseenter)=\"focusedIndex.set(i)\">\n          {{ option.label }}\n        </div>\n      }\n      @if (showEmpty()) {\n        <div\n          class=\"ea-autocomplete__empty\"\n          role=\"status\">\n          {{ resolvedEmptyMessage() }}\n        </div>\n      }\n    </div>\n  </ea-popover>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.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)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:var(--space-1) 0;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(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -5560,7 +5577,14 @@ function resolveAriaTarget(host) {
  * 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. Accepts either a
- * plain string or a `TemplateRef` for styled multi-part content.
+ * plain string or a `TemplateRef` for styled multi-part content. Binding an
+ * empty string suppresses the bubble, which is how a host shows one only in
+ * some states (a label that is currently truncated, say).
+ *
+ * The directive listens on `focusin`, not `focus`, so it fires for a focusable
+ * descendant of the host as well as the host itself. A host listener paired
+ * with `eaTooltip` has to use `focusin` for the same reason: `focus` does not
+ * bubble, so it never fires when the focus lands on a child.
  */
 class TooltipDirective {
     el = inject(ElementRef);
@@ -8049,7 +8073,7 @@ class ColorPickerComponent {
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (clearable() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "svAreaEl", first: true, predicate: ["svAreaEl"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrackEl"], descendants: true, isSignal: true }, { propertyName: "alphaTrackEl", first: true, predicate: ["alphaTrackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-color-picker\">\n    <div\n      class=\"ea-color-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-color-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-labelledby]=\"triggerLabelledBy()\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"onTriggerKeydown($event)\">\n        <span\n          class=\"ea-color-picker__swatch\"\n          aria-hidden=\"true\">\n          <span\n            class=\"ea-color-picker__swatch-fill\"\n            [style.background-color]=\"value() ? displayColor() : null\">\n          </span>\n        </span>\n        <span\n          class=\"ea-color-picker__trigger-value\"\n          [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (clearable() && value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-color-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-color-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      [surfaceId]=\"popoverId()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-color-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"onPopoverKeydown($event)\">\n        <div\n          #svAreaEl\n          class=\"ea-color-picker__sv-area\"\n          role=\"slider\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          [attr.aria-valuenow]=\"satPercent()\"\n          [attr.aria-valuetext]=\"\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          \"\n          [style.background-color]=\"hueColor()\"\n          (pointerdown)=\"onSvPointerDown($event)\"\n          (pointermove)=\"onSvPointerMove($event)\"\n          (pointerup)=\"onSvPointerUp($event)\"\n          (pointercancel)=\"onSvPointerUp($event)\"\n          (keydown)=\"onSvKeydown($event)\">\n          <div class=\"ea-color-picker__sv-area-sat\"></div>\n          <div class=\"ea-color-picker__sv-area-val\"></div>\n          <div\n            class=\"ea-color-picker__sv-pointer\"\n            [style.background-color]=\"opaqueColor()\"\n            [style.left]=\"svPointerLeft()\"\n            [style.top]=\"svPointerTop()\">\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__sv-status\"\n          aria-live=\"polite\">\n          {{\n            i18n\n              .messages()\n              .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n          }}\n        </div>\n\n        <div class=\"ea-color-picker__sliders\">\n          <div class=\"ea-color-picker__slider-row\">\n            <span\n              class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n              aria-hidden=\"true\">\n              <span\n                class=\"ea-color-picker__swatch-fill\"\n                [style.background-color]=\"displayColor()\">\n              </span>\n            </span>\n            <div class=\"ea-color-picker__strip-stack\">\n              <div\n                #hueTrackEl\n                class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n                role=\"slider\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n                [attr.aria-valuemin]=\"0\"\n                [attr.aria-valuemax]=\"360\"\n                [attr.aria-valuenow]=\"hueRounded()\"\n                (pointerdown)=\"onHuePointerDown($event)\"\n                (pointermove)=\"onHuePointerMove($event)\"\n                (pointerup)=\"onHuePointerUp($event)\"\n                (pointercancel)=\"onHuePointerUp($event)\"\n                (keydown)=\"onHueKeydown($event)\">\n                <div\n                  class=\"ea-color-picker__strip-thumb\"\n                  [style.left]=\"huePointerLeft()\">\n                </div>\n              </div>\n              @if (showAlpha()) {\n                <div\n                  #alphaTrackEl\n                  class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n                  role=\"slider\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n                  [attr.aria-valuemin]=\"0\"\n                  [attr.aria-valuemax]=\"100\"\n                  [attr.aria-valuenow]=\"alphaPercentRounded()\"\n                  [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n                  [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n                  (pointerdown)=\"onAlphaPointerDown($event)\"\n                  (pointermove)=\"onAlphaPointerMove($event)\"\n                  (pointerup)=\"onAlphaPointerUp($event)\"\n                  (pointercancel)=\"onAlphaPointerUp($event)\"\n                  (keydown)=\"onAlphaKeydown($event)\">\n                  <div\n                    class=\"ea-color-picker__strip-thumb\"\n                    [style.left]=\"alphaPointerLeft()\">\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"ea-color-picker__inputs\"\n          [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n          @switch (activeFormat()) {\n            @case ('hex') {\n              <label\n                class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n                <span class=\"ea-color-picker__input-label\">HEX</span>\n                <input\n                  class=\"ea-color-picker__input\"\n                  type=\"text\"\n                  dir=\"auto\"\n                  spellcheck=\"false\"\n                  autocomplete=\"off\"\n                  maxlength=\"9\"\n                  [value]=\"hexInputValue()\"\n                  (input)=\"onHexInput($event)\"\n                  (blur)=\"onHexBlur()\" />\n              </label>\n            }\n            @case ('rgb') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">R</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().r\"\n                  (input)=\"onRgbInput('r', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">G</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().g\"\n                  (input)=\"onRgbInput('g', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">B</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"rgb().b\"\n                  (input)=\"onRgbInput('b', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n            @case ('hsl') {\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">H</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().h\"\n                  (input)=\"onHslInput('h', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">S</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().s\"\n                  (input)=\"onHslInput('s', $event)\" />\n              </label>\n              <label class=\"ea-color-picker__input-group\">\n                <span class=\"ea-color-picker__input-label\">L</span>\n                <input\n                  class=\"ea-color-picker__input ea-color-picker__input--num\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  pattern=\"\\d*\"\n                  maxlength=\"3\"\n                  [value]=\"hslDisplay().l\"\n                  (input)=\"onHslInput('l', $event)\" />\n              </label>\n              @if (showAlpha()) {\n                <label class=\"ea-color-picker__input-group\">\n                  <span class=\"ea-color-picker__input-label\">A</span>\n                  <input\n                    class=\"ea-color-picker__input ea-color-picker__input--num\"\n                    type=\"text\"\n                    inputmode=\"numeric\"\n                    pattern=\"\\d*\"\n                    maxlength=\"3\"\n                    [value]=\"alphaPercentRounded()\"\n                    (input)=\"onAlphaInput($event)\" />\n                </label>\n              }\n            }\n          }\n          @if (canToggleFormat()) {\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__format-toggle\"\n              [attr.aria-label]=\"formatToggleLabel()\"\n              (click)=\"cycleInputMode()\">\n              {{ formatLabel() }}\n            </button>\n          }\n        </div>\n\n        @if (hasEyeDropper()) {\n          <div class=\"ea-color-picker__tools\">\n            <button\n              type=\"button\"\n              class=\"ea-color-picker__tool-btn\"\n              [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n              (click)=\"pickFromScreen()\">\n              <ea-icon-droplet aria-hidden=\"true\" />\n              <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n            </button>\n          </div>\n        }\n\n        @if (presets().length > 0) {\n          <div class=\"ea-color-picker__presets\">\n            <span\n              class=\"ea-color-picker__presets-label\"\n              [id]=\"id() + '-presets-label'\">\n              {{ i18n.messages().colorPicker.presets }}\n            </span>\n            <div\n              class=\"ea-color-picker__presets-grid\"\n              role=\"group\"\n              [attr.aria-labelledby]=\"id() + '-presets-label'\">\n              @for (preset of presets(); track preset) {\n                <button\n                  type=\"button\"\n                  class=\"ea-color-picker__preset\"\n                  [attr.aria-label]=\"preset\"\n                  [attr.aria-pressed]=\"activePresets().has(preset)\"\n                  [style.background-color]=\"preset\"\n                  (click)=\"selectPreset(preset)\">\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.85em}.ea-color-picker__trigger-value--placeholder{color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);background-image:linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"], dependencies: [{ kind: "component", type: DropletIconComponent, selector: "ea-icon-droplet" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -9845,7 +9869,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\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)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:not-allowed}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-date-picker__input:disabled{cursor:not-allowed}.ea-date-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-date-picker\">\n    <div\n      #fieldEl\n      class=\"ea-date-picker__field\"\n      [ngClass]=\"fieldClasses()\">\n      <button\n        type=\"button\"\n        class=\"ea-date-picker__calendar-button\"\n        [disabled]=\"isDisabled() || readonly()\"\n        [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n        (click)=\"toggle()\">\n        <ea-icon-calendar aria-hidden=\"true\" />\n      </button>\n      <input\n        #inputEl\n        type=\"text\"\n        dir=\"auto\"\n        autocomplete=\"off\"\n        class=\"ea-date-picker__input\"\n        [id]=\"id()\"\n        [value]=\"inputText()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.aria-label]=\"label() ? null : fallbackLabel()\"\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)=\"onInput($event)\"\n        (keydown)=\"handleInputKeydown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\" />\n      @if (value() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-date-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-date-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"fieldEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [surfaceId]=\"dialogId()\"\n      [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-date-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown)=\"handleGridKeydown($event)\">\n        <div class=\"ea-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n            (click)=\"goToPrevYear()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n            (click)=\"goToPrevMonth()\">\n            <ea-icon-chevron-left\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <span\n            class=\"ea-date-picker__month-label\"\n            aria-live=\"polite\">\n            {{ monthYearLabel() }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n            (click)=\"goToNextMonth()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__nav-btn\"\n            [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n            (click)=\"goToNextYear()\">\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n            <ea-icon-chevron-right\n              class=\"ea-rtl-flip\"\n              aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <div\n          class=\"ea-date-picker__grid\"\n          role=\"grid\">\n          <div\n            class=\"ea-date-picker__weekday-row\"\n            role=\"row\">\n            @for (label of weekdayLabels(); track label) {\n              <div\n                class=\"ea-date-picker__weekday\"\n                role=\"columnheader\">\n                {{ label }}\n              </div>\n            }\n          </div>\n          @for (week of weeks(); track $index) {\n            <div\n              class=\"ea-date-picker__week\"\n              role=\"row\">\n              @for (day of week; track day.date.getTime()) {\n                <div\n                  class=\"ea-date-picker__cell\"\n                  role=\"gridcell\"\n                  [attr.aria-selected]=\"day.isSelected\">\n                  <button\n                    type=\"button\"\n                    class=\"ea-date-picker__day\"\n                    [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n                    [class.ea-date-picker__day--today]=\"day.isToday\"\n                    [class.ea-date-picker__day--selected]=\"day.isSelected\"\n                    [class.ea-date-picker__day--focused]=\"day.isFocused\"\n                    [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n                    [attr.aria-disabled]=\"day.isDisabled || null\"\n                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                    [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n                    (click)=\"selectDay(day)\">\n                    {{ day.day }}\n                  </button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <div class=\"ea-date-picker__footer\">\n          <button\n            type=\"button\"\n            class=\"ea-date-picker__today-btn\"\n            (click)=\"goToToday()\">\n            {{ i18n.messages().datePicker.today }}\n          </button>\n        </div>\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:not-allowed}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary)}.ea-date-picker__input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-date-picker__input:disabled{cursor:not-allowed}.ea-date-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:not-allowed;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: CalendarIconComponent, selector: "ea-icon-calendar" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -9955,11 +9979,11 @@ class DialogComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", 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 }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], 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() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.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: "22.0.8", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", 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 }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], 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() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.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: "22.0.8", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.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"] }]
+            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() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        [attr.aria-label]=\"i18n.messages().dialog.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.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 }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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"] }] } });
 
 // The padding side, per position, applied to the push target so its content
@@ -10395,11 +10419,11 @@ class DrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", 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 }, animation: { classPropertyName: "animation", publicName: "animation", 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 }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [class.ea-drawer--animated]=\"animation() !== 'none'\"\n  [class.ea-drawer--linear]=\"animation() === 'linear'\"\n  [class.ea-drawer--push]=\"mode() === 'push'\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  (close)=\"onDialogClose()\">\n  <div\n    #panelEl\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.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: "22.0.8", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", 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 }, animation: { classPropertyName: "animation", publicName: "animation", 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 }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [class.ea-drawer--animated]=\"animation() !== 'none'\"\n  [class.ea-drawer--linear]=\"animation() === 'linear'\"\n  [class.ea-drawer--push]=\"mode() === 'push'\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  (close)=\"onDialogClose()\">\n  <div\n    #panelEl\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.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: "22.0.8", 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  [class.ea-drawer--animated]=\"animation() !== 'none'\"\n  [class.ea-drawer--linear]=\"animation() === 'linear'\"\n  [class.ea-drawer--push]=\"mode() === 'push'\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  (close)=\"onDialogClose()\">\n  <div\n    #panelEl\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.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"] }]
+            args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #drawerEl\n  class=\"ea-drawer\"\n  [class.ea-drawer--animated]=\"animation() !== 'none'\"\n  [class.ea-drawer--linear]=\"animation() === 'linear'\"\n  [class.ea-drawer--push]=\"mode() === 'push'\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  (close)=\"onDialogClose()\">\n  <div\n    #panelEl\n    class=\"ea-drawer__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-drawer__close\"\n        [attr.aria-label]=\"i18n.messages().drawer.close\"\n        (click)=\"handleClose()\">\n        <ea-icon-x />\n      </button>\n    }\n\n    <div\n      #headerEl\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;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.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 }] }], panelEl: [{ type: i0.ViewChild, args: ['panelEl', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pushTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushTarget", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", 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"] }] } });
 
 /**
@@ -10679,7 +10703,7 @@ class DropdownComponent {
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.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)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      role=\"combobox\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n      [attr.aria-activedescendant]=\"\n        isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n      \"\n      [attr.aria-labelledby]=\"triggerLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n      </span>\n      <ea-icon-chevron-down\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n    </button>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"listbox\"\n      [surfaceId]=\"id() + '-listbox'\"\n      [aria-label]=\"label()\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-dropdown__menu\"\n        [ngClass]=\"menuClasses()\"\n        role=\"none\">\n        @for (option of options(); track option.value; let i = $index) {\n          <div\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.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)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -11891,6 +11915,11 @@ class FileUploaderComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a selection adds to the current files or replaces them. Defaults
+     * to `true`: picking a second file appends it rather than swapping it in, so
+     * a single-file field has to set this to `false` explicitly.
+     */
     multiple = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /** Comma-separated MIME types and / or file extensions, e.g. `'image/*,.pdf'`. */
@@ -11921,6 +11950,12 @@ class FileUploaderComponent {
     rejected = output();
     /** Fires whenever a file is removed via its row's X button. */
     fileRemoved = output();
+    /**
+     * Fires when a drag enters or leaves the dropzone. The component consumes
+     * the drag events it handles, so a wrapper tracking its own drag styling
+     * reads the state from here rather than from the DOM.
+     */
+    dragOverChanged = output();
     isDragOver = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
     isFocused = signal(false, /* @ts-ignore */
@@ -12031,23 +12066,34 @@ class FileUploaderComponent {
         // Reset so re-picking the same file re-triggers the input
         inputEl.value = '';
     }
+    // Handled alongside dragover so the pair a wrapper listens for stays
+    // balanced: consuming dragenter without it would strand the wrapper's own
+    // drag state, since it never sees the matching dragleave or drop
+    onDragEnter(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.setDragOver(true);
+    }
     onDragOver(event) {
         if (this.isDisabled()) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(true);
+        this.setDragOver(true);
     }
     onDragLeave(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        this.setDragOver(false);
     }
     onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        this.setDragOver(false);
         if (this.isDisabled()) {
             return;
         }
@@ -12056,6 +12102,13 @@ class FileUploaderComponent {
             this.acceptFiles(files);
         }
     }
+    setDragOver(next) {
+        if (this.isDragOver() === next) {
+            return;
+        }
+        this.isDragOver.set(next);
+        this.dragOverChanged.emit(next);
+    }
     removeFile(file) {
         if (this.isDisabled()) {
             return;
@@ -12133,13 +12186,13 @@ class FileUploaderComponent {
         return `${file.name}|${file.size}|${file.lastModified}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileUploaderComponent, isStandalone: true, selector: "ea-file-uploader", 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 }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, showFileList: { classPropertyName: "showFileList", publicName: "showFileList", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", 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", rejected: "rejected", fileRemoved: "fileRemoved" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FileUploaderComponent, isStandalone: true, selector: "ea-file-uploader", 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 }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, showFileList: { classPropertyName: "showFileList", publicName: "showFileList", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", 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", rejected: "rejected", fileRemoved: "fileRemoved", dragOverChanged: "dragOverChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--color-state-hover));color:var(--ea-file-uploader-dropzone-color-hover, var(--color-text-secondary))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -12161,8 +12214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => FileUploaderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
-        }], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
+                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragenter)=\"onDragEnter($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-file-uploader-field--2xs{font-size:var(--font-size-2xs)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--ea-file-uploader-dropzone-color, var(--color-text-tertiary));text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--ea-file-uploader-dropzone-background-color, var(--color-bg-subtle));cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-hover, var(--color-state-hover));color:var(--ea-file-uploader-dropzone-color-hover, var(--color-text-secondary))}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--ea-file-uploader-dropzone-background-color-drag-over, var(--color-brand-subtle));color:var(--ea-file-uploader-dropzone-color-drag-over, var(--color-brand-default))}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--ea-field-messages-size, var(--text-helper-size));line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
+        }], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], dragOverChanged: [{ type: i0.Output, args: ["dragOverChanged"] }] } });
 const ARCHIVE_MIMES = new Set([
     'application/zip',
     'application/x-zip-compressed',
@@ -12812,7 +12865,7 @@ class MenuComponent {
         this.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 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(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 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(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--2xs{font-size:var(--font-size-2xs)}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -12921,14 +12974,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
 
+/**
+ * Whether an element's text is clipped by its own box, i.e. whether an
+ * `text-overflow: ellipsis` on it is actually showing. The one-pixel slack
+ * absorbs the sub-pixel rounding a fractional layout leaves behind, which
+ * would otherwise read as a permanent overflow on text that fits exactly.
+ */
+function isTruncated(el) {
+    return el.scrollWidth > el.clientWidth + 1;
+}
+
 /**
  * Inline label commonly used to represent filters, categories, or selected
  * items. When `removable`, renders a close button that emits `removed`; the
  * accessible name of that button is configurable via `removeLabel` and
  * otherwise falls back to the active locale's translation.
+ *
+ * The projected label is capped by `maxWidth` (or the `--ea-tag-max-width`
+ * custom property) and ellipsizes rather than widening the chip, revealing its
+ * full text in a tooltip while it is clipped.
  */
 class TagComponent {
     i18n = inject(EagamiI18nService);
+    destroyRef = inject(DestroyRef);
+    labelEl = viewChild('labelEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelEl" }] : /* istanbul ignore next */ []));
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
@@ -12939,6 +13009,19 @@ class TagComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     removeLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Widest the chip may grow, in px; a longer label ellipsizes instead. Also
+     * settable in CSS as `--ea-tag-max-width`, which this input overrides.
+     */
+    maxWidth = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Where a label clipped by `maxWidth` reveals its full text. Set `none` for
+     * a tag rendered inside a tooltip, which would otherwise stack a second
+     * bubble over the first.
+     */
+    tooltip = input('above', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
     /**
      * Whether the remove button is a tab stop. Set `false` inside a composite
      * widget (a combobox trigger, a grid cell) whose own keyboard model owns
@@ -12948,26 +13031,60 @@ class TagComponent {
     ...(ngDevMode ? [{ debugName: "removeTabbable" }] : /* istanbul ignore next */ []));
     /** Fires when the user activates the remove button on a `removable` tag. */
     removed = output();
+    /** Full label text, held only while the rendered label is clipped. */
+    clippedText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clippedText" }] : /* istanbul ignore next */ []));
     /** Accessible label for the remove button, falling back to the active locale. */
     resolvedRemoveLabel = computed(() => this.removeLabel() ?? this.i18n.messages().tag.remove, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedRemoveLabel" }] : /* istanbul ignore next */ []));
+    /** Tooltip text for the label; empty suppresses the bubble entirely. */
+    labelTooltip = computed(() => this.tooltip() === 'none' ? '' : this.clippedText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelTooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = computed(() => this.tooltip() === 'below' ? 'bottom' : 'top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-tag--${this.variant()}`]: true,
         [`ea-tag--${this.size()}`]: true,
         'ea-tag--disabled': this.disabled(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.watchLabel());
+    }
     onRemove(event) {
         event.stopPropagation();
         this.removed.emit();
     }
+    /**
+     * Keeps `clippedText` in step with the rendered label. Size and text are
+     * watched separately because a capped chip holds its width when the text
+     * behind the ellipsis changes, so a resize alone would leave stale text.
+     */
+    watchLabel() {
+        const el = this.labelEl()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const measure = () => this.clippedText.set(isTruncated(el) ? (el.textContent ?? '').trim() : '');
+        measure();
+        if (typeof ResizeObserver !== 'undefined') {
+            const resize = new ResizeObserver(measure);
+            resize.observe(el);
+            this.destroyRef.onDestroy(() => resize.disconnect());
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            const mutation = new MutationObserver(measure);
+            mutation.observe(el, { characterData: true, childList: true, subtree: true });
+            this.destroyRef.onDestroy(() => mutation.disconnect());
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, removeTabbable: { classPropertyName: "removeTabbable", publicName: "removeTabbable", 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.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--2xs{font-size:var(--font-size-2xs)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove>*{font-size:1.25em}.ea-tag__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.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: "22.0.8", 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 }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, removeTabbable: { classPropertyName: "removeTabbable", publicName: "removeTabbable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["labelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\"\n  [style.max-width.px]=\"maxWidth()\"\n  [eaTooltip]=\"labelTooltip()\"\n  [tooltipPosition]=\"tooltipPosition()\">\n  <span\n    #labelEl\n    class=\"ea-tag__label\">\n    <ng-content />\n  </span>\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;max-width:var(--ea-tag-max-width, none);padding:var(--ea-tag-padding-block, .25em) .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--2xs{font-size:var(--font-size-2xs)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__label{overflow:hidden;min-width:0;padding-block:.25em;margin-block:-.25em;text-overflow:ellipsis;white-space:nowrap}.ea-tag__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove>*{font-size:1.25em}.ea-tag__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--2xs{font-size:var(--font-size-2xs)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove>*{font-size:1.25em}.ea-tag__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.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 }] }], removeTabbable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabbable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+            args: [{ selector: 'ea-tag', imports: [NgClass, TooltipDirective, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\"\n  [style.max-width.px]=\"maxWidth()\"\n  [eaTooltip]=\"labelTooltip()\"\n  [tooltipPosition]=\"tooltipPosition()\">\n  <span\n    #labelEl\n    class=\"ea-tag__label\">\n    <ng-content />\n  </span>\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;max-width:var(--ea-tag-max-width, none);padding:var(--ea-tag-padding-block, .25em) .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--2xs{font-size:var(--font-size-2xs)}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__label{overflow:hidden;min-width:0;padding-block:.25em;margin-block:-.25em;text-overflow:ellipsis;white-space:nowrap}.ea-tag__remove{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove>*{font-size:1.25em}.ea-tag__remove:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { labelEl: [{ type: i0.ViewChild, args: ['labelEl', { isSignal: true }] }], 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 }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], removeTabbable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabbable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
  * Multi-select dropdown. Renders selections as removable `<ea-tag>` chips
@@ -12978,12 +13095,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * integrates with Angular forms via `ControlValueAccessor`.
  */
 class MultiSelectComponent {
+    wrapperEl = viewChild('wrapperEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperEl" }] : /* istanbul ignore next */ []));
     triggerEl = viewChild('triggerEl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     searchEl = viewChild('searchEl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchEl" }] : /* istanbul ignore next */ []));
+    listEl = viewChild('listEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listEl" }] : /* istanbul ignore next */ []));
+    optionLabelEls = viewChildren('optionLabelEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabelEls" }] : /* istanbul ignore next */ []));
     i18n = inject(EagamiI18nService);
     injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Accessible name for the combobox when no visible `label` is set. */
@@ -13018,6 +13142,18 @@ class MultiSelectComponent {
     /** Max number of chips shown inside the trigger; the rest collapse into a "+N more" pill. `0` removes the cap so every chip shows and the row scrolls horizontally. */
     maxVisibleChips = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxVisibleChips" }] : /* istanbul ignore next */ []));
+    /**
+     * Widest a selected-value chip may grow, in px; a longer label ellipsizes
+     * and reveals its full text in a tooltip.
+     */
+    maxChipWidth = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxChipWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Widest the option popover may grow: a px value, or `anchor` to hold it to
+     * the field's own width so a long option truncates instead of widening it.
+     */
+    popoverMaxWidth = input('anchor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popoverMaxWidth" }] : /* istanbul ignore next */ []));
     id = input(uniqueId('ea-multi-select'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** Selected option values, in the original options order. */
@@ -13146,6 +13282,18 @@ class MultiSelectComponent {
         [`ea-multi-select__trigger-wrapper--${this.size()}`]: true,
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    /** Values whose rendered option label is currently clipped by the panel. */
+    clippedOptions = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clippedOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The panel is portaled, so a consumer has no element to hang a tooltip on
+        // and no event path back here; the component resolves its own truncation.
+        afterRenderEffect(() => {
+            this.optionLabelEls();
+            this.measureClippedOptions();
+        });
+        afterNextRender(() => this.watchListWidth(), { injector: this.injector });
+    }
     writeValue(val) {
         this.value.set(val ?? []);
     }
@@ -13394,14 +13542,45 @@ class MultiSelectComponent {
         this.onTouched();
         this.changed.emit(next);
     }
+    /**
+     * Re-reads which option labels are clipped. The result is written back only
+     * when the set actually differs, since an unconditional write would render,
+     * re-measure, and write again forever.
+     */
+    measureClippedOptions() {
+        const clipped = new Set();
+        for (const ref of this.optionLabelEls()) {
+            const el = ref.nativeElement;
+            const value = el.dataset['value'];
+            if (value !== undefined && isTruncated(el)) {
+                clipped.add(value);
+            }
+        }
+        const current = this.clippedOptions();
+        const same = current.size === clipped.size && [...clipped].every(value => current.has(value));
+        if (!same) {
+            this.clippedOptions.set(clipped);
+        }
+    }
+    // The panel settles on its final width a frame after opening, which changes
+    // what fits without changing the option set the render effect watches
+    watchListWidth() {
+        const el = this.listEl()?.nativeElement;
+        if (!el || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => this.measureClippedOptions());
+        observer.observe(el);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MultiSelectComponent, isStandalone: true, selector: "ea-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MultiSelectComponent, isStandalone: true, selector: "ea-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", isSignal: true, isRequired: false, transformFunction: null }, maxChipWidth: { classPropertyName: "maxChipWidth", publicName: "maxChipWidth", isSignal: true, isRequired: false, transformFunction: null }, popoverMaxWidth: { classPropertyName: "popoverMaxWidth", publicName: "popoverMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "removeTabbable"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "wrapperEl", first: true, predicate: ["wrapperEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }, { propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "optionLabelEls", predicate: ["optionLabelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span\n                #optionLabelEl\n                class=\"ea-multi-select__option-label\"\n                [attr.data-value]=\"opt.value\"\n                [eaTooltip]=\"clippedOptions().has(opt.value) ? opt.label : ''\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "maxWidth", "tooltip", "removeTabbable"], outputs: ["removed"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -13414,6 +13593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         PopoverComponent,
                         SearchIconComponent,
                         TagComponent,
+                        TooltipDirective,
                         XIconComponent,
                     ], providers: [
                         {
@@ -13421,8 +13601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
-        }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+                    ], template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      #wrapperEl\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [maxWidth]=\"maxChipWidth()\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"wrapperEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n      [matchAnchorWidth]=\"true\"\n      [maxWidth]=\"popoverMaxWidth()\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          #listEl\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span\n                #optionLabelEl\n                class=\"ea-multi-select__option-label\"\n                [attr.data-value]=\"opt.value\"\n                [eaTooltip]=\"clippedOptions().has(opt.value) ? opt.label : ''\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { wrapperEl: [{ type: i0.ViewChild, args: ['wrapperEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], optionLabelEls: [{ type: i0.ViewChildren, args: ['optionLabelEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], maxChipWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipWidth", required: false }] }], popoverMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverMaxWidth", 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"] }] } });
 
 /**
  * Numeric field with min/max/step bounds, native arrow-key stepping, and
@@ -16366,7 +16546,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,