@ethlete/components 1.0.0-next.48 → 1.0.0-next.50

package/fesm2022/ethlete-components.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, createComponent, isSignal, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, afterRenderEffect, outputBinding, afterEveryRender, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, nextFrame, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, createUnsavedChangesTracker, createDocumentElementSignal, defineProvider, fromNextFrame, injectRoute, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, ColorInteractiveHasFocusDirective, dragGestureFrom, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, getFocusableElements, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
+import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, nextFrame, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, getFocusableElements, ColorInteractiveHasFocusDirective, dragGestureFrom, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
 import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, setYear, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, parse, isValid, setSeconds, setMinutes, setHours, setMilliseconds, endOfDay, eachDayOfInterval, differenceInCalendarDays, addMinutes, differenceInMinutes, addHours } from 'date-fns';
-import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
-import { Subject, take, tap, timer, takeUntil, fromEvent, filter, combineLatest, switchMap, map, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, mergeMap } from 'rxjs';
+import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
+import { Subject, take, tap, timer, takeUntil, fromEvent, filter, switchMap, map, combineLatest, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, mergeMap } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
-import { createMetadataKey, metadata, FORM_FIELD, validate, createManagedMetadataKey, form } from '@angular/forms/signals';
+import { createMetadataKey, metadata, FORM_FIELD, validate, createManagedMetadataKey, submit, form } from '@angular/forms/signals';
 import { enUS } from 'date-fns/locale/en-US';
 import { tap as tap$1 } from 'rxjs/operators';
 
@@ -2246,7 +2246,7 @@ class SpinnerComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -2337,16 +2337,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-valuenow]': 'determinate() ? clampedValue() : null',
                         '[attr.aria-valuemin]': 'determinate() ? 0 : null',
                         '[attr.aria-valuemax]': 'determinate() ? 100 : null',
-                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-track-color{syntax: \"<color>\"; inherits: true; initial-value: transparent;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 14%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
+                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: false; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate 1568ms linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
         }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], determinate: [{ type: i0.Input, args: [{ isSignal: true, alias: "determinate", required: false }] }] } });
 
 class ButtonPropertiesStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonPropertiesStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ButtonPropertiesStylesComponent, isStandalone: true, selector: "et-button-properties-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-duration: .7s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonPropertiesStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-track-color: transparent;--et-spinner-duration: .7s}}\n"] }]
+            args: [{ selector: 'et-button-properties-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-button-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-button-padding{syntax: \"*\"; inherits: false; initial-value: 8px 16px;}@property --et-button-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-button-font-weight{syntax: \"<number>\"; inherits: false; initial-value: 500;}@property --et-button-cursor{syntax: \"*\"; inherits: false; initial-value: pointer;}@property --et-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .4;}@property --et-button-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-button-line-height{syntax: \"<number>\"; inherits: false; initial-value: 1.5;}@property --et-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}.et-button-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s ease}.et-button-loader .et-button-loader-spinner{--et-spinner-color: currentColor;--et-spinner-duration: .7s}}\n"] }]
         }] });
 
 class ButtonStylesDirective {
@@ -2378,13 +2378,20 @@ class ButtonDirective {
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         this.pressed = input(false, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.emitAriaPressed = input(true, { ...(ngDevMode ? { debugName: "emitAriaPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * How far along the work behind `loading` is, as a percentage (`0`-`100`). Leave it unset for work
+         * of unknown length - the loading spinner then stays indeterminate.
+         */
+        this.progress = input(null, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined || value === '' ? null : numberAttribute(value)) });
         this.IS_BUTTON = this.elementRef.nativeElement.tagName === 'BUTTON';
         this.IS_ANCHOR = this.elementRef.nativeElement.tagName === 'A';
         this.isInactive = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInactive" }] : /* istanbul ignore next */ []));
+        this.hasProgress = computed(() => this.progress() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -2403,7 +2410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.tabindex]': 'IS_ANCHOR && isInactive() ? -1 : null',
                     },
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
 const INHERIT_COLOR = 'inherit';
 class ButtonColorDirective {
@@ -2609,7 +2616,7 @@ class ButtonComponent {
         ...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
     @if (iconAlignment() === 'start') {
       <div class="et-button-icon">
         <ng-container *ngTemplateOutlet="iconTpl" />
@@ -2631,6 +2638,9 @@ class ButtonComponent {
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -2665,6 +2675,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -2676,7 +2689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type', 'pressed'],
+                            inputs: ['disabled', 'loading', 'progress', 'type', 'pressed'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -2715,7 +2728,7 @@ class IconButtonComponent {
         ...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed", "emitAriaPressed", "emitAriaPressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed", "emitAriaPressed", "emitAriaPressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: ButtonColorDirective, inputs: ["color", "color", "pressedColor", "pressedColor"] }], ngImport: i0, template: `
     <div class="et-icon-button-icon">
       <ng-content select="[etIcon]" />
     </div>
@@ -2725,6 +2738,9 @@ class IconButtonComponent {
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -2743,6 +2759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -2750,7 +2769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type', 'pressed', 'emitAriaPressed'],
+                            inputs: ['disabled', 'loading', 'progress', 'type', 'pressed', 'emitAriaPressed'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -8685,7 +8704,7 @@ class FabComponent {
         ...(ngDevMode ? [{ debugName: "expandedAttr" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FabComponent, isStandalone: true, selector: "[et-fab]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-expanded": "expandedAttr()", "attr.data-icon-alignment": "iconAlignment()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-fab" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FabComponent, isStandalone: true, selector: "[et-fab]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-expanded": "expandedAttr()", "attr.data-icon-alignment": "iconAlignment()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-fab" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
     @if (iconAlignment() === 'start') {
       <div class="et-fab-icon">
         <ng-container *ngTemplateOutlet="iconTpl" />
@@ -8705,6 +8724,9 @@ class FabComponent {
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8737,6 +8759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8748,7 +8773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type'],
+                            inputs: ['disabled', 'loading', 'progress', 'type'],
                         },
                         ButtonStylesDirective,
                         FocusRingDirective,
@@ -8789,7 +8814,7 @@ class TextButtonComponent {
         ...(ngDevMode ? [{ debugName: "spinnerConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextButtonComponent, isStandalone: true, selector: "[et-text-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-text-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextButtonComponent, isStandalone: true, selector: "[et-text-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-text-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
     @if (iconAlignment() === 'start') {
       <div class="et-text-button-icon">
         <ng-container *ngTemplateOutlet="iconTpl" />
@@ -8811,6 +8836,9 @@ class TextButtonComponent {
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8845,6 +8873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8856,7 +8887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type'],
+                            inputs: ['disabled', 'loading', 'progress', 'type'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -8899,7 +8930,7 @@ class WindowControlButtonComponent {
         ...(ngDevMode ? [{ debugName: "spinnerConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WindowControlButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WindowControlButtonComponent, isStandalone: true, selector: "[et-window-control-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-window-control-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WindowControlButtonComponent, isStandalone: true, selector: "[et-window-control-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kind": "kind()", "attr.data-size": "size()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-window-control-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "progress", "progress", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
     <div class="et-window-control-button-icon">
       <ng-content />
     </div>
@@ -8909,6 +8940,9 @@ class WindowControlButtonComponent {
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8927,6 +8961,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         <et-spinner
           [diameter]="spinnerConfig().diameter"
           [strokeWidth]="spinnerConfig().strokeWidth"
+          [determinate]="buttonDir.hasProgress()"
+          [track]="buttonDir.hasProgress()"
+          [value]="buttonDir.progress() ?? 0"
           class="et-button-loader-spinner"
         />
       </div>
@@ -8934,7 +8971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type', 'pressed'],
+                            inputs: ['disabled', 'loading', 'progress', 'type', 'pressed'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -9676,6 +9713,18 @@ const resolveOriginDocument = (origin, fallback) => {
         return origin.target.ownerDocument ?? fallback;
     return fallback;
 };
+/**
+ * The stacking level an overlay opened from `origin` mounts at: whatever the nearest ancestor
+ * declaring `data-et-overlay-layer` says, so an overlay opened from inside an always-on-top surface
+ * (the query devtools panel, say) is not painted behind it.
+ */
+const resolveZIndex = (origin, document) => {
+    const resolved = resolveOrigin(origin, document);
+    if (resolved instanceof HTMLElement) {
+        return resolveOverlayLayer(resolved);
+    }
+    return resolveOverlayLayer(resolved?.target instanceof Element ? resolved.target : null);
+};
 const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const overlayRuntime = injectOverlayRuntime();
     const injector = inject(EnvironmentInjector);
@@ -9706,6 +9755,7 @@ const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
             id,
             component,
             document: resolveOriginDocument(config.origin, document),
+            zIndex: config.zIndex ?? resolveZIndex(config.origin, document),
             viewContainerRef: config.viewContainerRef,
             injector: config.injector,
             providers: [{ provide: OVERLAY_REF, useValue: overlayRef }, ...(config.providers ?? [])],
@@ -9745,6 +9795,7 @@ const OVERLAY_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
             id,
             component: OverlayContainerComponent,
             document: resolveOriginDocument(resolvedConfig.origin, document),
+            zIndex: resolvedConfig.zIndex ?? resolveZIndex(resolvedConfig.origin, document),
             viewContainerRef: resolvedConfig.viewContainerRef,
             injector: resolvedConfig.injector,
             providers: [{ provide: OVERLAY_REF, useValue: overlayRef }, ...(resolvedConfig.providers ?? [])],
@@ -12170,12 +12221,318 @@ const createOverlayOpener = ((definition, config) => definition.kind === 'queryP
     ? createQueryParamOverlayOpener(definition, config)
     : createStandardOverlayOpener(definition, config));
 
+const OVERLAY_ROUTER_CONFIG_TOKEN = new InjectionToken('OVERLAY_ROUTER_CONFIG_TOKEN');
+const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
+    const overlayRef = inject(OVERLAY_REF);
+    const config = inject(OVERLAY_ROUTER_CONFIG_TOKEN);
+    const location = inject(Location, { optional: true });
+    const id = createComponentId('ovr');
+    let syncUrl = config.syncUrl ?? false;
+    let router = null;
+    let route = null;
+    const getInitialRoute = () => config.initialRoute ?? config.routes[0]?.path ?? '/';
+    const syncCurrentRoute = signal(getInitialRoute(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncCurrentRoute" }] : /* istanbul ignore next */ []));
+    /** In-memory navigation history, used to power `back()`/`canGoBack()` independently of the browser. */
+    const history = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+    const nativeBrowserBackStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeBrowserBackStack" }] : /* istanbul ignore next */ []));
+    const pendingNavigations = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingNavigations" }] : /* istanbul ignore next */ []));
+    // The current route, but delayed by one frame to ensure that the needed animation classes are applied.
+    const currentRoute = toSignal(toObservable(syncCurrentRoute).pipe(switchMap((r) => fromNextFrame().pipe(map(() => r)))), { initialValue: getInitialRoute() });
+    const navigationPending = computed(() => pendingNavigations() > 0 || currentRoute() !== syncCurrentRoute(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationPending" }] : /* istanbul ignore next */ []));
+    const extraRoutes = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraRoutes" }] : /* istanbul ignore next */ []));
+    const transitionType = signal('slide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transitionType" }] : /* istanbul ignore next */ []));
+    const navigationDirection = signal('forward', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationDirection" }] : /* istanbul ignore next */ []));
+    const canGoBack = computed(() => history().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
+    const routes = computed(() => {
+        const allRoutes = [...config.routes, ...extraRoutes()];
+        return allRoutes.map((r) => ({
+            ...r,
+            inputs: Object.entries(r.inputs ?? {}).reduce((acc, [key, value]) => {
+                acc[key] = isSignal(value) ? value() : value;
+                return acc;
+            }, {}),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []));
+    const currentPage = computed(() => {
+        const curr = syncCurrentRoute();
+        return routes().find((r) => r.path === curr) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    const updateBrowserUrl = (r) => {
+        if (!router || !route)
+            return;
+        router.navigate([route()], {
+            queryParams: { [id]: r },
+            queryParamsHandling: 'merge',
+        });
+    };
+    const updateCurrentRoute = (r) => {
+        if (r === syncCurrentRoute())
+            return false;
+        if (routes().findIndex((rt) => rt.path === r) === -1) {
+            if (ngDevMode) {
+                console.error(`[OverlayRouter] The route "${r}" does not exist.`, config);
+            }
+            return false;
+        }
+        syncCurrentRoute.set(r);
+        updateBrowserUrl(r);
+        return true;
+    };
+    const resolvePath = (r) => {
+        if (Array.isArray(r)) {
+            r = r.join('/');
+        }
+        if (r === '') {
+            r = '/';
+        }
+        const isAbsolute = r.startsWith('/');
+        const isReplaceCurrent = r.startsWith('./');
+        const isBack = r.startsWith('../');
+        const isForward = !isAbsolute && !isReplaceCurrent && !isBack;
+        const curr = syncCurrentRoute();
+        if (isForward) {
+            r = `${curr}/${r}`;
+        }
+        else if (isReplaceCurrent) {
+            const currSegments = curr.split('/').filter((s) => s !== '');
+            currSegments.pop();
+            const newSegments = r.split('/').filter((s) => s !== '.');
+            r = `/${currSegments.concat(newSegments).join('/')}`;
+        }
+        else if (isBack) {
+            const currSegments = curr.split('/').filter((s) => s !== '');
+            const newSegments = r.split('/').filter((s) => s !== '..');
+            const stepsBack = r.split('/').filter((s) => s === '..').length;
+            for (let i = 0; i < stepsBack; i++) {
+                currSegments.pop();
+            }
+            r = `/${currSegments.concat(newSegments).join('/')}`;
+        }
+        return {
+            route: r,
+            type: isBack || r === '/' ? 'back' : isReplaceCurrent ? 'replace-current' : isAbsolute ? 'absolute' : 'forward',
+        };
+    };
+    const navigationGuards = new Set();
+    const registerNavigationGuard = (guard) => {
+        navigationGuards.add(guard);
+        return () => {
+            navigationGuards.delete(guard);
+        };
+    };
+    /**
+     * Answers synchronously for as long as the guards do, and only goes async from the first one that
+     * returns a promise: a route change deferred by a microtask lands after the frame the outlet
+     * measured for its transition.
+     */
+    const canLeave = (from, to) => {
+        const guards = [...navigationGuards];
+        const runFrom = (index) => {
+            for (let i = index; i < guards.length; i++) {
+                const mayLeave = guards[i]?.({ from, to }) ?? true;
+                if (mayLeave === false) {
+                    return false;
+                }
+                if (mayLeave !== true) {
+                    return mayLeave.then((allowed) => (allowed ? runFrom(i + 1) : false));
+                }
+            }
+            return true;
+        };
+        return runFrom(0);
+    };
+    const whenAllowed = (attempt) => {
+        const result = canLeave(attempt.from, attempt.to);
+        if (result === true) {
+            attempt.allowed();
+            return;
+        }
+        pendingNavigations.update((count) => count + 1);
+        void Promise.resolve(result).then((mayLeave) => {
+            pendingNavigations.update((count) => count - 1);
+            return mayLeave ? attempt.allowed() : attempt.blocked?.();
+        });
+    };
+    const commitNavigation = (commit) => {
+        const { resolvedRoute, from, navigateConfig } = commit;
+        const allRoutes = routes();
+        const targetDirectionHint = allRoutes.find((rt) => rt.path === resolvedRoute.route)?.navigationDirection?.to;
+        const sourceDirectionHint = allRoutes.find((rt) => rt.path === from)?.navigationDirection?.from;
+        const defaultDirection = resolvedRoute.type === 'back' ? 'backward' : 'forward';
+        const fromIndex = allRoutes.findIndex((rt) => rt.path === from);
+        const targetIndex = allRoutes.findIndex((rt) => rt.path === resolvedRoute.route);
+        const routeOrderDirection = fromIndex === -1 || targetIndex === -1 ? defaultDirection : targetIndex < fromIndex ? 'backward' : 'forward';
+        // Route hints and route order only affect the played animation. The history bookkeeping below
+        // must stay tied to the actual navigation semantics, or `back()` would misbehave for them.
+        const historyDirection = navigateConfig?.navigationDirection ?? defaultDirection;
+        const animationDirection = navigateConfig?.navigationDirection ?? targetDirectionHint ?? sourceDirectionHint ?? routeOrderDirection;
+        navigationDirection.set(animationDirection);
+        if (updateCurrentRoute(resolvedRoute.route)) {
+            history.update((h) => (historyDirection === 'backward' ? h.slice(0, -1) : [...h, from]));
+        }
+    };
+    const navigate = (r, navigateConfig) => {
+        const resolvedRoute = resolvePath(r);
+        const from = syncCurrentRoute();
+        if (resolvedRoute.route === from) {
+            return;
+        }
+        whenAllowed({
+            from,
+            to: resolvedRoute.route,
+            allowed: () => commitNavigation({ resolvedRoute, from, navigateConfig }),
+        });
+    };
+    const back = () => {
+        if (syncUrl && location) {
+            location.back();
+            return true;
+        }
+        const target = history().at(-1);
+        if (target === undefined) {
+            return false;
+        }
+        navigate(target, { navigationDirection: 'backward' });
+        return true;
+    };
+    const addRoute = (r) => {
+        extraRoutes.set([...extraRoutes(), r]);
+    };
+    const removeRoute = (path) => {
+        extraRoutes.set(extraRoutes().filter((r) => r.path !== path));
+    };
+    const navigateToInitialRoute = () => {
+        updateCurrentRoute(getInitialRoute());
+    };
+    const setupUrlSync = () => {
+        const angularRouter = inject(Router, { optional: true });
+        if (!angularRouter) {
+            if (ngDevMode) {
+                console.warn('[OverlayRouter] `syncUrl` is enabled but no Angular Router is available. URL sync is disabled.');
+            }
+            syncUrl = false;
+            return;
+        }
+        router = angularRouter;
+        route = injectRoute();
+        const currentRouteQueryParam = injectQueryParam(id);
+        updateBrowserUrl(syncCurrentRoute());
+        let isFirstRouteEvent = true;
+        effect(() => {
+            const r = currentRouteQueryParam();
+            untracked(() => {
+                if (isFirstRouteEvent) {
+                    isFirstRouteEvent = false;
+                    return;
+                }
+                // The user navigated back or forward using the browser history
+                if (!r) {
+                    // The route query param no longer exists - close the overlay
+                    overlayRef.close();
+                }
+                else if (r !== syncCurrentRoute()) {
+                    const navStack = nativeBrowserBackStack();
+                    const curr = syncCurrentRoute();
+                    // An empty nav stack means the only way to have got here is back.
+                    const isForward = navStack.length > 0 && r === navStack[navStack.length - 1];
+                    const nextStack = !navStack.length ? [curr] : isForward ? navStack.slice(0, -1) : [...navStack, curr];
+                    const resolvedRoute = resolvePath(r);
+                    whenAllowed({
+                        from: curr,
+                        to: resolvedRoute.route,
+                        allowed: () => {
+                            commitNavigation({
+                                resolvedRoute,
+                                from: curr,
+                                navigateConfig: { navigationDirection: isForward ? 'forward' : 'backward' },
+                            });
+                            nativeBrowserBackStack.set(nextStack);
+                        },
+                        // The browser already moved, so a veto has to put the param back or the URL names a
+                        // route that is not being rendered.
+                        blocked: () => updateBrowserUrl(curr),
+                    });
+                }
+                else {
+                    // The navigation was triggered by ui interaction. Clear the back nav stack.
+                    nativeBrowserBackStack.set([]);
+                }
+            });
+        });
+    };
+    if (syncUrl) {
+        setupUrlSync();
+    }
+    inject(DestroyRef).onDestroy(() => {
+        if (syncUrl) {
+            // Remove the dialog route from the browser url
+            updateBrowserUrl(undefined);
+        }
+    });
+    return {
+        currentRoute,
+        extraRoutes,
+        transitionType,
+        navigationDirection,
+        canGoBack,
+        navigationPending,
+        routes,
+        currentPage,
+        navigate,
+        registerNavigationGuard,
+        back,
+        resolvePath,
+        addRoute,
+        removeRoute,
+        updateCurrentRoute,
+        navigateToInitialRoute,
+    };
+}, { name: 'OverlayRouter' });
+const provideOverlayRouterService = /* @__PURE__ */ toProvideFn(OVERLAY_ROUTER_DEF);
+const injectOverlayRouter = /* @__PURE__ */ toInjectFn(OVERLAY_ROUTER_DEF);
+const OVERLAY_ROUTER_TOKEN = /* @__PURE__ */ toToken(OVERLAY_ROUTER_DEF);
+const provideOverlayRouterConfig = (config) => {
+    return [
+        {
+            provide: OVERLAY_ROUTER_CONFIG_TOKEN,
+            useValue: config,
+        },
+    ];
+};
+/**
+ * Provides both the overlay router config and the overlay router itself, so a consumer only needs
+ * a single entry in the overlay's `providers` instead of wiring the router separately.
+ *
+ * @example
+ * overlayManager.open(MyOverlay, {
+ *   strategies: dialogOverlayStrategy(),
+ *   providers: [provideOverlayRouter({ routes: [...] })],
+ * });
+ */
+const provideOverlayRouter = (config) => {
+    return [...provideOverlayRouterConfig(config), ...provideOverlayRouterService()];
+};
+
 /**
  * The overlay flavor of the unsaved-changes family. Injects the current `OVERLAY_REF` and vetoes a
  * dismissal (outside pointer, escape, drag, or a programmatic `close()`) while the watched form has
  * unsaved changes: it runs the `confirm` and only then re-issues the close. Call from an overlay
  * content component's injection context.
  *
+ * In a routed overlay it guards route changes away from the page too, so a single call covers both
+ * ways the edits can be lost - see `guardRouteChanges`.
+ *
  * Being a tracker, it also locks the browser tab while there are changes (`beforeunload`) - configure
  * or disable that via the inherited `tab` option.
  *
@@ -12194,6 +12551,7 @@ const createOverlayOpener = ((definition, config) => definition.kind === 'queryP
 const createOverlayUnsavedChangesGuard = (config) => {
     assertInInjectionContext(createOverlayUnsavedChangesGuard);
     const overlayRef = inject(OVERLAY_REF);
+    const overlayRouter = inject(OVERLAY_ROUTER_TOKEN, { optional: true });
     const destroyRef = inject(DestroyRef);
     const tracker = createUnsavedChangesTracker(config);
     const dismiss = config.dismissSources ?? {};
@@ -12239,7 +12597,16 @@ const createOverlayUnsavedChangesGuard = (config) => {
         });
         return false;
     });
-    const destroy = () => unregister();
+    // `runCheck` passes on its own when there is nothing to discard, but answering `true` synchronously
+    // keeps an unguarded navigation committing in the same task - a promise costs the outlet its
+    // transition origin.
+    const unregisterRouteGuard = overlayRouter && (config.guardRouteChanges ?? true)
+        ? overlayRouter.registerNavigationGuard(() => (tracker.hasChanges() ? tracker.runCheck() : true))
+        : null;
+    const destroy = () => {
+        unregister();
+        unregisterRouteGuard?.();
+    };
     destroyRef.onDestroy(destroy);
     return { ...tracker, destroy };
 };
@@ -12389,301 +12756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "etQueryParamOverlayLink", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "etQueryParamOverlayLinkValue", required: true }] }] } });
 
-const OVERLAY_ROUTER_CONFIG_TOKEN = new InjectionToken('OVERLAY_ROUTER_CONFIG_TOKEN');
-const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
-    const overlayRef = inject(OVERLAY_REF);
-    const config = inject(OVERLAY_ROUTER_CONFIG_TOKEN);
-    const location = inject(Location, { optional: true });
-    const id = createComponentId('ovr');
-    let syncUrl = config.syncUrl ?? false;
-    let router = null;
-    let route = null;
-    const getInitialRoute = () => config.initialRoute ?? config.routes[0]?.path ?? '/';
-    const syncCurrentRoute = signal(getInitialRoute(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "syncCurrentRoute" }] : /* istanbul ignore next */ []));
-    /** In-memory navigation history, used to power `back()`/`canGoBack()` independently of the browser. */
-    const history = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
-    const nativeBrowserBackStack = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nativeBrowserBackStack" }] : /* istanbul ignore next */ []));
-    const pendingNavigations = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pendingNavigations" }] : /* istanbul ignore next */ []));
-    // The current route, but delayed by one frame to ensure that the needed animation classes are applied.
-    const currentRoute = toSignal(toObservable(syncCurrentRoute).pipe(switchMap((r) => fromNextFrame().pipe(map(() => r)))), { initialValue: getInitialRoute() });
-    // A commit stays invisible on `currentRoute` for a frame, so the route being left still reports
-    // itself active in there. Both halves must count as pending, or an optimistic selection is undone.
-    const navigationPending = computed(() => pendingNavigations() > 0 || currentRoute() !== syncCurrentRoute(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationPending" }] : /* istanbul ignore next */ []));
-    const extraRoutes = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "extraRoutes" }] : /* istanbul ignore next */ []));
-    const transitionType = signal('slide', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transitionType" }] : /* istanbul ignore next */ []));
-    const navigationDirection = signal('forward', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationDirection" }] : /* istanbul ignore next */ []));
-    const canGoBack = computed(() => history().length > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
-    const routes = computed(() => {
-        const allRoutes = [...config.routes, ...extraRoutes()];
-        return allRoutes.map((r) => ({
-            ...r,
-            inputs: Object.entries(r.inputs ?? {}).reduce((acc, [key, value]) => {
-                acc[key] = isSignal(value) ? value() : value;
-                return acc;
-            }, {}),
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []));
-    const currentPage = computed(() => {
-        const curr = syncCurrentRoute();
-        return routes().find((r) => r.path === curr) ?? null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-    const updateBrowserUrl = (r) => {
-        if (!router || !route)
-            return;
-        router.navigate([route()], {
-            queryParams: { [id]: r },
-            queryParamsHandling: 'merge',
-        });
-    };
-    const updateCurrentRoute = (r) => {
-        if (r === syncCurrentRoute())
-            return false;
-        if (routes().findIndex((rt) => rt.path === r) === -1) {
-            if (ngDevMode) {
-                console.error(`[OverlayRouter] The route "${r}" does not exist.`, config);
-            }
-            return false;
-        }
-        syncCurrentRoute.set(r);
-        updateBrowserUrl(r);
-        return true;
-    };
-    const resolvePath = (r) => {
-        if (Array.isArray(r)) {
-            r = r.join('/');
-        }
-        if (r === '') {
-            r = '/';
-        }
-        const isAbsolute = r.startsWith('/');
-        const isReplaceCurrent = r.startsWith('./');
-        const isBack = r.startsWith('../');
-        const isForward = !isAbsolute && !isReplaceCurrent && !isBack;
-        const curr = syncCurrentRoute();
-        if (isForward) {
-            r = `${curr}/${r}`;
-        }
-        else if (isReplaceCurrent) {
-            const currSegments = curr.split('/').filter((s) => s !== '');
-            currSegments.pop();
-            const newSegments = r.split('/').filter((s) => s !== '.');
-            r = `/${currSegments.concat(newSegments).join('/')}`;
-        }
-        else if (isBack) {
-            const currSegments = curr.split('/').filter((s) => s !== '');
-            const newSegments = r.split('/').filter((s) => s !== '..');
-            const stepsBack = r.split('/').filter((s) => s === '..').length;
-            for (let i = 0; i < stepsBack; i++) {
-                currSegments.pop();
-            }
-            r = `/${currSegments.concat(newSegments).join('/')}`;
-        }
-        return {
-            route: r,
-            type: isBack || r === '/' ? 'back' : isReplaceCurrent ? 'replace-current' : isAbsolute ? 'absolute' : 'forward',
-        };
-    };
-    const navigationGuards = new Set();
-    const registerNavigationGuard = (guard) => {
-        navigationGuards.add(guard);
-        return () => {
-            navigationGuards.delete(guard);
-        };
-    };
-    /**
-     * Answers synchronously while nothing is registered: a route change deferred by a microtask lands
-     * after the frame the outlet measured for its transition.
-     */
-    const canLeave = (from, to) => {
-        const guards = [...navigationGuards];
-        if (!guards.length) {
-            return true;
-        }
-        return guards.reduce((mayLeave, guard) => mayLeave.then((allowed) => (allowed ? guard({ from, to }) : false)), Promise.resolve(true));
-    };
-    const whenAllowed = (attempt) => {
-        const result = canLeave(attempt.from, attempt.to);
-        if (result === true) {
-            attempt.allowed();
-            return;
-        }
-        pendingNavigations.update((count) => count + 1);
-        void Promise.resolve(result).then((mayLeave) => {
-            pendingNavigations.update((count) => count - 1);
-            return mayLeave ? attempt.allowed() : attempt.blocked?.();
-        });
-    };
-    const commitNavigation = (commit) => {
-        const { resolvedRoute, from, navigateConfig } = commit;
-        const allRoutes = routes();
-        const targetDirectionHint = allRoutes.find((rt) => rt.path === resolvedRoute.route)?.navigationDirection?.to;
-        const sourceDirectionHint = allRoutes.find((rt) => rt.path === from)?.navigationDirection?.from;
-        const defaultDirection = resolvedRoute.type === 'back' ? 'backward' : 'forward';
-        const fromIndex = allRoutes.findIndex((rt) => rt.path === from);
-        const targetIndex = allRoutes.findIndex((rt) => rt.path === resolvedRoute.route);
-        const routeOrderDirection = fromIndex === -1 || targetIndex === -1 ? defaultDirection : targetIndex < fromIndex ? 'backward' : 'forward';
-        // Route hints and route order only affect the played animation. The history bookkeeping below
-        // must stay tied to the actual navigation semantics, or `back()` would misbehave for them.
-        const historyDirection = navigateConfig?.navigationDirection ?? defaultDirection;
-        const animationDirection = navigateConfig?.navigationDirection ?? targetDirectionHint ?? sourceDirectionHint ?? routeOrderDirection;
-        navigationDirection.set(animationDirection);
-        if (updateCurrentRoute(resolvedRoute.route)) {
-            history.update((h) => (historyDirection === 'backward' ? h.slice(0, -1) : [...h, from]));
-        }
-    };
-    const navigate = (r, navigateConfig) => {
-        const resolvedRoute = resolvePath(r);
-        const from = syncCurrentRoute();
-        if (resolvedRoute.route === from) {
-            return;
-        }
-        whenAllowed({
-            from,
-            to: resolvedRoute.route,
-            allowed: () => commitNavigation({ resolvedRoute, from, navigateConfig }),
-        });
-    };
-    const back = () => {
-        if (syncUrl && location) {
-            location.back();
-            return true;
-        }
-        const target = history().at(-1);
-        if (target === undefined) {
-            return false;
-        }
-        navigate(target, { navigationDirection: 'backward' });
-        return true;
-    };
-    const addRoute = (r) => {
-        extraRoutes.set([...extraRoutes(), r]);
-    };
-    const removeRoute = (path) => {
-        extraRoutes.set(extraRoutes().filter((r) => r.path !== path));
-    };
-    const navigateToInitialRoute = () => {
-        updateCurrentRoute(getInitialRoute());
-    };
-    const setupUrlSync = () => {
-        const angularRouter = inject(Router, { optional: true });
-        if (!angularRouter) {
-            if (ngDevMode) {
-                console.warn('[OverlayRouter] `syncUrl` is enabled but no Angular Router is available. URL sync is disabled.');
-            }
-            syncUrl = false;
-            return;
-        }
-        router = angularRouter;
-        route = injectRoute();
-        const currentRouteQueryParam = injectQueryParam(id);
-        updateBrowserUrl(syncCurrentRoute());
-        let isFirstRouteEvent = true;
-        effect(() => {
-            const r = currentRouteQueryParam();
-            untracked(() => {
-                if (isFirstRouteEvent) {
-                    isFirstRouteEvent = false;
-                    return;
-                }
-                // The user navigated back or forward using the browser history
-                if (!r) {
-                    // The route query param no longer exists - close the overlay
-                    overlayRef.close();
-                }
-                else if (r !== syncCurrentRoute()) {
-                    const navStack = nativeBrowserBackStack();
-                    const curr = syncCurrentRoute();
-                    // An empty nav stack means the only way to have got here is back.
-                    const isForward = navStack.length > 0 && r === navStack[navStack.length - 1];
-                    const nextStack = !navStack.length ? [curr] : isForward ? navStack.slice(0, -1) : [...navStack, curr];
-                    const resolvedRoute = resolvePath(r);
-                    whenAllowed({
-                        from: curr,
-                        to: resolvedRoute.route,
-                        allowed: () => {
-                            commitNavigation({
-                                resolvedRoute,
-                                from: curr,
-                                navigateConfig: { navigationDirection: isForward ? 'forward' : 'backward' },
-                            });
-                            nativeBrowserBackStack.set(nextStack);
-                        },
-                        // The browser already moved, so a veto has to put the param back or the URL names a
-                        // route that is not being rendered.
-                        blocked: () => updateBrowserUrl(curr),
-                    });
-                }
-                else {
-                    // The navigation was triggered by ui interaction. Clear the back nav stack.
-                    nativeBrowserBackStack.set([]);
-                }
-            });
-        });
-    };
-    if (syncUrl) {
-        setupUrlSync();
-    }
-    inject(DestroyRef).onDestroy(() => {
-        if (syncUrl) {
-            // Remove the dialog route from the browser url
-            updateBrowserUrl(undefined);
-        }
-    });
-    return {
-        currentRoute,
-        extraRoutes,
-        transitionType,
-        navigationDirection,
-        canGoBack,
-        navigationPending,
-        routes,
-        currentPage,
-        navigate,
-        registerNavigationGuard,
-        back,
-        resolvePath,
-        addRoute,
-        removeRoute,
-        updateCurrentRoute,
-        navigateToInitialRoute,
-    };
-}, { name: 'OverlayRouter' });
-const provideOverlayRouterService = /* @__PURE__ */ toProvideFn(OVERLAY_ROUTER_DEF);
-const injectOverlayRouter = /* @__PURE__ */ toInjectFn(OVERLAY_ROUTER_DEF);
-const OVERLAY_ROUTER_TOKEN = /* @__PURE__ */ toToken(OVERLAY_ROUTER_DEF);
-const provideOverlayRouterConfig = (config) => {
-    return [
-        {
-            provide: OVERLAY_ROUTER_CONFIG_TOKEN,
-            useValue: config,
-        },
-    ];
-};
-/**
- * Provides both the overlay router config and the overlay router itself, so a consumer only needs
- * a single entry in the overlay's `providers` instead of wiring the router separately.
- *
- * @example
- * overlayManager.open(MyOverlay, {
- *   strategies: dialogOverlayStrategy(),
- *   providers: [provideOverlayRouter({ routes: [...] })],
- * });
- */
-const provideOverlayRouter = (config) => {
-    return [...provideOverlayRouterConfig(config), ...provideOverlayRouterService()];
-};
-
 const OVERLAY_BACK_OR_CLOSE_TOKEN = new InjectionToken('OVERLAY_BACK_OR_CLOSE_TOKEN');
 class OverlayBackOrCloseDirective {
     constructor() {
@@ -19401,7 +19473,8 @@ const FORM_FIELD_TOKEN = new InjectionToken('FORM_FIELD_TOKEN');
 let uniqueIdCounter$1 = 0;
 class FormFieldDirective {
     constructor() {
-        this.hostElement = injectHostElement();
+        /** The field's own element, chrome included - what scrolling to this field targets. */
+        this.element = injectHostElement();
         // the `warn()` rules live on the signal-forms field, so the warnings come from wherever
         // `[formField]` is bound: on the control this field wraps (`et-form-field`), or on this very host
         // when the control renders its own support region (`et-slider`, `et-rating`, …). Reading both here
@@ -19549,12 +19622,12 @@ class FormFieldDirective {
             afterNextRender(() => {
                 const control = this.registeredControl();
                 if (!control) {
-                    throw new RuntimeError(FORM_FIELD_ERROR_CODES.MISSING_CONTROL, '[FormFieldDirective] No form control found. Add <et-input> or <et-checkbox> inside <et-form-field>.', { element: this.hostElement });
+                    throw new RuntimeError(FORM_FIELD_ERROR_CODES.MISSING_CONTROL, '[FormFieldDirective] No form control found. Add <et-input> or <et-checkbox> inside <et-form-field>.', { element: this.element });
                 }
                 if (!this.registeredLabel() && !(control.hasCustomAccessibleName?.() ?? false)) {
                     throw new RuntimeError(FORM_FIELD_ERROR_CODES.MISSING_LABEL, '[FormFieldDirective] The control has no accessible name. Project an <et-label> into the ' +
                         '<et-form-field>, or set aria-label / aria-labelledby on the control. A placeholder is not ' +
-                        'an accessible name.', { element: this.hostElement });
+                        'an accessible name.', { element: this.element });
                 }
             });
         }
@@ -20188,7 +20261,7 @@ const mountTextFieldShellStyles = () => injectStyleManager().mount(FormFieldText
  * (`et-input`, `et-number-input`, `et-password-input`, `et-color-input`, `et-textarea`). It owns
  * the pieces those directives copy-pasted verbatim: the standard form-control inputs, the
  * form-field registration, the `describedBy`/`focused`/`focusTarget`/`labelId` plumbing, the
- * `touched && invalid` error gate, and the focus-target `activate()`.
+ * `touched && invalid` error gate, and the focus-target `focus()`/`activate()`.
  *
  * Subclasses add their own `value` model, `controlType`, `hasValue`, and any control-specific
  * surface (placeholder, native element wiring, etc.). Must be extended by an `@Directive` - Angular
@@ -20255,7 +20328,7 @@ class TextFieldControlDirective {
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
         this.focused = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
-        /** @internal The element `activate()` focuses - the native control by default. */
+        /** @internal The element `focus()` targets - the native control by default. */
         this.focusTarget = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusTarget" }] : /* istanbul ignore next */ []));
         this.registeredLabelId = computed(() => this.formField?.registeredLabel()?.id() ?? null, /* @ts-ignore */
@@ -20274,10 +20347,13 @@ class TextFieldControlDirective {
         destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.focusTarget()?.focus();
+        this.focusTarget()?.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextFieldControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TextFieldControlDirective, isStandalone: true, inputs: { touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", 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 }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", 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 } }, outputs: { touched: "touchedChange", mixed: "mixedChange" }, host: { properties: { "attr.data-mixed": "mixed() || null" } }, ngImport: i0 }); }
@@ -20859,10 +20935,13 @@ class CascaderDirective {
         }
     }
     activate() {
+        this.focus({ preventScroll: true });
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.registeredTrigger()?.elementRef.nativeElement.focus({ preventScroll: true });
+        this.registeredTrigger()?.elementRef.nativeElement.focus(options);
     }
     /**
      * Whether a node is selected - on the committed chain in single mode; in multi mode an
@@ -22095,6 +22174,9 @@ class CascaderComponent {
     isCrumbCurrent(columnIndex) {
         return !this.isColumnOffstage(columnIndex);
     }
+    focus(options) {
+        this.cascader.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CascaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CascaderComponent, isStandalone: true, selector: "et-cascader", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-cascader" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], hostDirectives: [{ directive: CascaderDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "dataSource", "dataSource", "multiple", "multiple", "selectableLevels", "selectableLevels", "compareWith", "compareWith", "toErrorMessage", "toErrorMessage", "mirrorPanelWidth", "mirrorPanelWidth", "maxVisibleColumns", "maxVisibleColumns", "mixedLabel", "mixedLabel", "placeholder", "placeholder", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-cascader-trigger\" etCascaderTrigger>\n  <span [attr.data-placeholder]=\"!cascader.hasValue() || null\" class=\"et-cascader-value\">\n    @if (cascader.displayValue(); as display) {\n      {{ display }}\n    } @else {\n      {{ cascader.placeholder() }}\n    }\n  </span>\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a blur\n         would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button\n    [disabled]=\"cascader.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-cascader-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template etCascaderSurface>\n  <et-cascader-panel #panel>\n    @if (cascader.canSearch()) {\n      <div class=\"et-cascader-search\">\n        <input [placeholder]=\"resolvedSearchPlaceholder()\" etCascaderSearch />\n      </div>\n    }\n\n    @if (panel.isSheet()) {\n      <!-- the sheet body is a fixed-height flex column: the header (when present) and the\n           column area share it, so the Back bar appearing doesn't change the total sheet\n           height \u2014 the column area just flexes to fill, and the panel never resizes -->\n      <div class=\"et-cascader-sheet-body\">\n        @if (cascader.isSearching()) {\n          <ng-container [ngTemplateOutlet]=\"searchResults\" />\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"sheetBrowse\" />\n        }\n      </div>\n    } @else if (cascader.isSearching()) {\n      <ng-container [ngTemplateOutlet]=\"searchResults\" />\n    } @else {\n      <div [style.--_et-cascader-visible-columns]=\"cascader.visibleColumns().length\" class=\"et-cascader-columns\">\n        <!-- every drilled level stays mounted on one translating track: a level collapsing\n             into a breadcrumb slides out to the left together with the columns following it,\n             and the reverse plays when a crumb brings it back \u2014 the viewport clips the rest -->\n        <div\n          [style.--_et-cascader-column-window-start]=\"cascader.visibleColumnStart()\"\n          class=\"et-cascader-columns-track\"\n        >\n          @for (column of cascader.columns(); track $index; let columnIndex = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"columnBody\"\n              [ngTemplateOutletContext]=\"{ $implicit: column, columnIndex }\"\n            />\n          }\n        </div>\n      </div>\n\n      <!-- the full drilled trail, shown while any level is collapsed out of the window; below\n           the columns so mounting never shifts them (the panel's animated block size covers the\n           height change). A crumb click anchors the window at its level without truncating. -->\n      @if (cascader.breadcrumbPath().length) {\n        <div class=\"et-cascader-breadcrumbs\">\n          @for (crumb of cascader.breadcrumbPath(); track $index; let last = $last) {\n            <span\n              class=\"et-cascader-crumb\"\n              animate.enter=\"et-cascader-crumb--enter\"\n              animate.leave=\"et-cascader-crumb--leave\"\n            >\n              <button\n                [attr.title]=\"crumb.label\"\n                [attr.data-current]=\"isCrumbCurrent($index) || null\"\n                (click)=\"cascader.showColumn($index)\"\n                class=\"et-cascader-breadcrumb\"\n                type=\"button\"\n              >\n                {{ crumb.label }}\n              </button>\n              @if (!last) {\n                <i class=\"et-cascader-breadcrumb-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n              }\n            </span>\n          }\n        </div>\n      }\n    }\n  </et-cascader-panel>\n</ng-template>\n\n<ng-template #sheetBrowse>\n  <!-- persistent nav bar (fixed height): only its contents animate, so nothing reflows\n             the column list. Back is an absolute overlay (no layout impact); the title slot's\n             shift wrapper translates to clear the Back space (transform = reliably smooth,\n             unlike a flex width transition), and the title cross-slides on level changes -->\n  <div [attr.data-back]=\"cascader.deepestColumnIndex() > 0 || null\" class=\"et-cascader-sheet-header\">\n    <button\n      [class.et-cascader-back--hidden]=\"cascader.deepestColumnIndex() === 0\"\n      [attr.aria-hidden]=\"cascader.deepestColumnIndex() === 0 || null\"\n      [attr.tabindex]=\"cascader.deepestColumnIndex() === 0 ? -1 : null\"\n      (click)=\"cascader.goBack()\"\n      class=\"et-cascader-back\"\n      et-text-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i class=\"et-cascader-back-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n      {{ resolvedBackLabel() }}\n    </button>\n\n    <span\n      [attr.data-nav]=\"cascader.navigationDirection()\"\n      [attr.data-anim]=\"cascader.titleAnimation()\"\n      class=\"et-cascader-sheet-title-slot\"\n    >\n      <!-- shifts right (transform) to make room for Back; the title fills it at the root -->\n      <span class=\"et-cascader-sheet-title-shift\">\n        <!-- keyed by depth so a level change re-creates it: old title slides out in the\n                   travel direction, new one slides in (both absolutely positioned) -->\n        @for (titleKey of [cascader.deepestColumnIndex()]; track titleKey) {\n          @let titleParent = cascader.columns()[titleKey]?.parent;\n          <span\n            class=\"et-cascader-sheet-title\"\n            animate.enter=\"et-cascader-sheet-title--enter\"\n            animate.leave=\"et-cascader-sheet-title--leave\"\n            >{{ titleParent?.label ?? cascader.placeholder() }}</span\n          >\n        }\n      </span>\n    </span>\n  </div>\n\n  <!-- one column at a time, keyed by depth so drilling / going back re-creates it and\n             re-fires the slide animation; it scrolls internally within the fixed body -->\n  <div class=\"et-cascader-columns\" data-sheet>\n    @for (columnIndex of [cascader.deepestColumnIndex()]; track columnIndex) {\n      @let sheetColumn = cascader.columns()[columnIndex];\n      @if (sheetColumn) {\n        <ng-container\n          [ngTemplateOutlet]=\"columnBody\"\n          [ngTemplateOutletContext]=\"{ $implicit: sheetColumn, columnIndex }\"\n        />\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #searchResults>\n  <div class=\"et-cascader-results\">\n    @switch (cascader.searchState().status) {\n      @case ('loading') {\n        <div class=\"et-cascader-state et-cascader-state--loading\">\n          <span\n            [class.et-cascader-state-content--visible]=\"showSearchSpinner()\"\n            [attr.aria-hidden]=\"!showSearchSpinner() || null\"\n            class=\"et-cascader-state-content\"\n          >\n            <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n            Searching\u2026\n          </span>\n        </div>\n      }\n      @case ('error') {\n        <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n          <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{\n            cascader.searchState().error\n          }}</span>\n          <button (click)=\"cascader.retrySearch()\" et-text-button size=\"sm\" type=\"button\">\n            {{ cascaderLabels().retry }}\n          </button>\n        </div>\n      }\n      @default {\n        @if (cascader.searchState().results.length) {\n          @for (result of cascader.searchState().results; track $index) {\n            <button\n              [path]=\"result\"\n              [index]=\"$index\"\n              [disabled]=\"resultDisabled(result)\"\n              class=\"et-cascader-search-option\"\n              etCascaderSearchOption\n              type=\"button\"\n            >\n              @if (cascader.multiple()) {\n                <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n              }\n              <span class=\"et-cascader-search-option-label\">\n                @for (part of result; track $index; let last = $last) {\n                  @if (last) {\n                    {{ part.label }}\n                  } @else {\n                    <span class=\"et-cascader-search-option-ancestor\">{{ part.label }} / </span>\n                  }\n                }\n              </span>\n            </button>\n          }\n        } @else {\n          <div class=\"et-cascader-state et-cascader-state--empty\">{{ cascaderLabels().noMatches }}</div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #columnBody let-column let-columnIndex=\"columnIndex\">\n  <div\n    [etCascaderColumn]=\"columnIndex\"\n    [attr.data-nav]=\"columnIndex === cascader.deepestColumnIndex() ? cascader.navigationDirection() : null\"\n    [class.et-cascader-column--offstage]=\"isColumnOffstage(columnIndex)\"\n    class=\"et-cascader-column\"\n  >\n    @switch (column.status) {\n      @case ('loading') {\n        <div class=\"et-cascader-state et-cascader-state--loading\">\n          <!-- laid out from the first frame and only faded in later, so the column cannot change\n               height when the spinner arrives; hidden from assistive tech until it does -->\n          <span\n            [class.et-cascader-state-content--visible]=\"showColumnSpinner()\"\n            [attr.aria-hidden]=\"!showColumnSpinner() || null\"\n            class=\"et-cascader-state-content\"\n          >\n            <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n            {{ cascaderLabels().loading }}\n          </span>\n        </div>\n      }\n      @case ('error') {\n        <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n          <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{ column.error }}</span>\n          <button (click)=\"cascader.retryColumn(columnIndex)\" et-text-button size=\"sm\" type=\"button\">\n            {{ cascaderLabels().retry }}\n          </button>\n        </div>\n      }\n      @default {\n        @if (column.nodes.length) {\n          @for (node of column.nodes; track $index) {\n            <button [node]=\"node\" [disabled]=\"node.disabled\" class=\"et-cascader-node\" etCascaderNode type=\"button\">\n              @if (cascader.multiple()) {\n                <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n              }\n              <span class=\"et-cascader-node-label\">{{ node.label }}</span>\n              @if (node.isLeaf !== true && node.hasChildren !== false) {\n                <i class=\"et-cascader-node-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n              }\n            </button>\n          }\n        } @else {\n          <div class=\"et-cascader-state et-cascader-state--empty\">{{ cascaderLabels().noOptions }}</div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer components{et-cascader{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;color:inherit}et-cascader .et-cascader-trigger{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;cursor:pointer;outline:none}et-cascader[data-disabled] .et-cascader-trigger{cursor:not-allowed}et-cascader .et-cascader-value{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}et-cascader .et-cascader-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-cascader[data-mixed] .et-cascader-value{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-cascader-arrow .et-icon{rotate:180deg}}\n"], dependencies: [{ kind: "directive", type: CascaderTriggerDirective, selector: "[etCascaderTrigger]", exportAs: ["etCascaderTrigger"] }, { kind: "directive", type: CascaderSurfaceDirective, selector: "ng-template[etCascaderSurface]", exportAs: ["etCascaderSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: CascaderColumnDirective, selector: "[etCascaderColumn]", inputs: ["etCascaderColumn"], exportAs: ["etCascaderColumn"] }, { kind: "directive", type: CascaderNodeDirective, selector: "[etCascaderNode]", inputs: ["node"], exportAs: ["etCascaderNode"] }, { kind: "directive", type: CascaderSearchDirective, selector: "input[etCascaderSearch]", exportAs: ["etCascaderSearch"] }, { kind: "directive", type: CascaderSearchOptionDirective, selector: "[etCascaderSearchOption]", inputs: ["path", "index"], exportAs: ["etCascaderSearchOption"] }, { kind: "component", type: CascaderPanelComponent, selector: "et-cascader-panel" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -22212,7 +22294,12 @@ class CheckboxDirective {
             return;
         // readonly stays focusable (view-only), it just cannot toggle
         this.toggle();
-        this.el.nativeElement.focus({ focusVisible: false });
+        this.focus({ focusVisible: false });
+    }
+    focus(options) {
+        if (this.disabled())
+            return;
+        this.el.nativeElement.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: CheckboxDirective, isStandalone: true, selector: "[etCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle()", "keydown.space": "toggle(); $event.preventDefault()", "blur": "touched.set(true)" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.aria-invalid": "shouldDisplayError() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-readonly": "readonly() || null", "attr.data-readonly": "readonly() || null", "attr.aria-required": "required() || null", "attr.aria-describedby": "describedBy() || null", "attr.aria-labelledby": "labelId() || null", "attr.tabindex": "disabled() ? -1 : 0" } }, ngImport: i0 }); }
@@ -22282,15 +22369,18 @@ class CheckboxComponent {
             });
         });
     }
+    focus(options) {
+        this.checkboxDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@layer components{@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius)}et-checkbox[data-readonly]{cursor:default}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}@media(hover:hover){et-checkbox:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}@media(hover:hover){:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-variant=card]) et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@layer components{@property --et-checkbox-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius)}et-checkbox[data-readonly]{cursor:default}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}@media(hover:hover){et-checkbox:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}@media(hover:hover){:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]):not([data-readonly]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-variant=card]) et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([data-readonly]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-checkbox', encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
                             directive: CheckboxDirective,
-                            inputs: ['checked', 'indeterminate', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name'],
+                            inputs: ['checked', 'indeterminate', 'touched', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name'],
                             outputs: ['checkedChange', 'indeterminateChange', 'touchedChange'],
                         },
                         ColorInteractiveDirective,
@@ -22786,8 +22876,11 @@ class ColorInputComponent {
         }
         event.preventDefault();
     }
+    focus(options) {
+        this.colorInputDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ColorInputComponent, isStandalone: true, selector: "et-color-input", host: { listeners: { "click": "colorInputDir.activate()" }, classAttribute: "et-color-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: ColorInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<span [style.background-color]=\"colorInputDir.swatchColor()\" class=\"et-color-input-swatch\" aria-hidden=\"true\"></span>\n<span class=\"et-color-input-value\">{{ colorInputDir.displayValue() }}</span>\n<input\n  #nativeInput\n  [value]=\"colorInputDir.resolvedColor()\"\n  [disabled]=\"colorInputDir.disabled()\"\n  [required]=\"colorInputDir.required()\"\n  [attr.name]=\"colorInputDir.name() || null\"\n  [attr.aria-invalid]=\"colorInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"colorInputDir.describedBy() || null\"\n  [attr.aria-label]=\"colorInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"colorInputDir.labelId() || null\"\n  [attr.aria-readonly]=\"colorInputDir.readonly() || null\"\n  (input)=\"syncNativeValue($event)\"\n  (mousedown)=\"blockWhenReadonly($event)\"\n  (click)=\"blockWhenReadonly($event)\"\n  (keydown)=\"blockWhenReadonly($event)\"\n  (focus)=\"colorInputDir.focused.set(true)\"\n  (blur)=\"colorInputDir.focused.set(false); colorInputDir.touched.set(true)\"\n  class=\"et-color-input-native\"\n  type=\"color\"\n/>\n", styles: ["@layer components{@property --et-color-input-swatch-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-color-input-swatch-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-color-input{position:relative;display:flex;flex:1;align-items:center;gap:8px;min-inline-size:0;color:inherit;cursor:pointer}et-color-input .et-color-input-swatch{inline-size:var(--et-color-input-swatch-size);block-size:var(--et-color-input-swatch-size);border-radius:var(--et-color-input-swatch-radius);border:1px solid var(--et-surface-border-solid, currentColor);flex:none}et-color-input .et-color-input-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-color-input .et-color-input-native{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;border:none;padding:0;cursor:pointer}et-color-input .et-color-input-native:disabled{cursor:default}et-color-input:has(.et-color-input-native:focus-visible) .et-color-input-swatch{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}et-color-input[data-mixed] .et-color-input-swatch{background:linear-gradient(to top right,transparent calc(50% - 1px),color-mix(in srgb,currentColor 25%,transparent) calc(50% - 1px),color-mix(in srgb,currentColor 25%,transparent) calc(50% + 1px),transparent calc(50% + 1px))}et-color-input[data-mixed] .et-color-input-value{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ColorInputComponent, isStandalone: true, selector: "et-color-input", host: { listeners: { "click": "colorInputDir.activate()" }, classAttribute: "et-color-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: ColorInputDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<span [style.background-color]=\"colorInputDir.swatchColor()\" class=\"et-color-input-swatch\" aria-hidden=\"true\"></span>\n<span class=\"et-color-input-value\">{{ colorInputDir.displayValue() }}</span>\n<input\n  #nativeInput\n  [value]=\"colorInputDir.resolvedColor()\"\n  [disabled]=\"colorInputDir.disabled()\"\n  [required]=\"colorInputDir.required()\"\n  [attr.name]=\"colorInputDir.name() || null\"\n  [attr.aria-invalid]=\"colorInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"colorInputDir.describedBy() || null\"\n  [attr.aria-label]=\"colorInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"colorInputDir.labelId() || null\"\n  [attr.aria-readonly]=\"colorInputDir.readonly() || null\"\n  (input)=\"syncNativeValue($event)\"\n  (mousedown)=\"blockWhenReadonly($event)\"\n  (click)=\"blockWhenReadonly($event)\"\n  (keydown)=\"blockWhenReadonly($event)\"\n  (focus)=\"colorInputDir.focused.set(true)\"\n  (blur)=\"colorInputDir.focused.set(false); colorInputDir.touched.set(true)\"\n  class=\"et-color-input-native\"\n  type=\"color\"\n/>\n", styles: ["@layer components{@property --et-color-input-swatch-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-color-input-swatch-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-color-input{position:relative;display:flex;flex:1;align-items:center;gap:8px;min-inline-size:0;color:inherit;cursor:pointer}et-color-input .et-color-input-swatch{inline-size:var(--et-color-input-swatch-size);block-size:var(--et-color-input-swatch-size);border-radius:var(--et-color-input-swatch-radius);border:1px solid var(--et-surface-border-solid, currentColor);flex:none}et-color-input .et-color-input-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-color-input .et-color-input-native{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;border:none;padding:0;cursor:pointer}et-color-input .et-color-input-native:disabled{cursor:default}et-color-input:has(.et-color-input-native:focus-visible) .et-color-input-swatch{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}et-color-input[data-mixed] .et-color-input-swatch{background:linear-gradient(to top right,transparent calc(50% - 1px),color-mix(in srgb,currentColor 25%,transparent) calc(50% - 1px),color-mix(in srgb,currentColor 25%,transparent) calc(50% + 1px),transparent calc(50% + 1px))}et-color-input[data-mixed] .et-color-input-value{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -22797,6 +22890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             inputs: [
                                 'value',
                                 'mixed',
+                                'touched',
                                 'mixedLabel',
                                 'disabled',
                                 'readonly',
@@ -23444,8 +23538,8 @@ class DatePickerInputFieldDirective {
         });
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     /** @internal `InputMaskHost` - an attached mask owns value-sync; our input/mirror handling stands down. */
     suppressNativeSync() {
@@ -23800,10 +23894,13 @@ class DatePickerInputDirective {
         }
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.registeredField()?.focus();
+        this.registeredField()?.focus(options);
     }
     /** Clears the value and any uncommitted field text - wired to the styled inputs' clear button. */
     clearValue() {
@@ -24138,6 +24235,9 @@ class DateInputComponent {
         event.stopPropagation();
         this.dateInput.clearValue();
     }
+    focus(options) {
+        this.dateInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateInputComponent, isStandalone: true, selector: "et-date-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-date-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"dateInput.maskPattern()\"\n  class=\"et-date-input-field\"\n  etDateInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-calendar\n      [value]=\"dateInput.date()\"\n      [min]=\"dateInput.minDate()\"\n      [max]=\"dateInput.maxDate()\"\n      [dateFilter]=\"dateInput.dateFilter()\"\n      [startAt]=\"dateInput.startAt()\"\n      [precision]=\"dateInput.precision()\"\n      [startView]=\"dateInput.startView()\"\n      [dateClass]=\"dateInput.dateClass()\"\n      [weekNumbers]=\"dateInput.weekNumbers()\"\n      [locale]=\"dateInput.effectiveLocale()\"\n      (valueChange)=\"dateInput.selectDate($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-input .et-date-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-input .et-date-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-input .et-date-input-field:disabled{cursor:not-allowed}et-date-input[data-mixed] .et-date-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "directive", type: DateInputFieldDirective, selector: "input[etDateInputField]", exportAs: ["etDateInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -24286,8 +24386,8 @@ class DateRangePickerInputFieldDirective {
         });
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     /** @internal `InputMaskHost` - an attached mask owns value-sync; our input/mirror handling stands down. */
     suppressNativeSync() {
@@ -24587,13 +24687,16 @@ class DateRangePickerInputDirective {
         return side === 'start' ? this.startDate() : this.endDate();
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
         // the first empty side, else start - mirrors where the next interaction lands.
         // While mixed both fields read as empty, so a fresh entry starts at the start side
         const target = this.mixed() || this.value().start === null || this.value().end !== null ? 'start' : 'end';
-        this.sides[target].field()?.focus();
+        this.sides[target].field()?.focus(options);
     }
     openPicker() {
         if (!this.interactive() || this.pickerOpen()) {
@@ -24934,6 +25037,9 @@ class DateRangeInputComponent {
         event.stopPropagation();
         this.rangeInput.clearRange();
     }
+    focus(options) {
+        this.rangeInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateRangeInputComponent, isStandalone: true, selector: "et-date-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "precision", "precision", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "rangeSelectionStrategy", "rangeSelectionStrategy", "comparisonStart", "comparisonStart", "comparisonEnd", "comparisonEnd", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-range-input-field\"\n  etDateRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-range-input-field\"\n  etDateRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-calendar\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [min]=\"rangeInput.minDate()\"\n      [max]=\"rangeInput.maxDate()\"\n      [dateFilter]=\"rangeInput.dateFilter()\"\n      [startAt]=\"rangeInput.startAt()\"\n      [precision]=\"rangeInput.precision()\"\n      [startView]=\"rangeInput.startView()\"\n      [dateClass]=\"rangeInput.dateClass()\"\n      [weekNumbers]=\"rangeInput.weekNumbers()\"\n      [rangeSelectionStrategy]=\"rangeInput.rangeSelectionStrategy()\"\n      [comparisonStart]=\"rangeInput.comparisonStart()\"\n      [comparisonEnd]=\"rangeInput.comparisonEnd()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:13em;min-inline-size:0;container:et-date-range-input / inline-size;color:inherit}et-date-range-input .et-date-range-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-range-input .et-date-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-range-input .et-date-range-input-field:disabled{cursor:not-allowed}et-date-range-input[data-mixed] .et-date-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-range-input .et-date-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-range-input (inline-size < 13em){et-date-range-input .et-date-range-input-field{flex-basis:100%}et-date-range-input .et-date-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "directive", type: DateRangeInputFieldDirective, selector: "input[etDateRangeInputField]", exportAs: ["etDateRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -26182,8 +26288,19 @@ class SelectionListDirective {
     markTouched() {
         this.touched.set(true);
     }
-    focusItem(item) {
-        item.elementRef.nativeElement.focus();
+    focusItem(item, options) {
+        item.elementRef.nativeElement.focus(options);
+    }
+    /** Mirrors the group's roving tabindex: the checked option, else the first enabled one. */
+    focus(options) {
+        if (this.disabled()) {
+            return;
+        }
+        const items = this.selection.items();
+        const target = items.find((item) => item.checked() && !item.disabled()) ?? items.find((item) => !item.disabled());
+        if (target) {
+            this.focusItem(target, options);
+        }
     }
     activate() {
         const firstItem = this.selection.items().find((i) => !i.disabled());
@@ -26379,6 +26496,7 @@ const SEGMENTED_BUTTON_GROUP_VARIANTS = {
 };
 class SegmentedButtonGroupComponent {
     constructor() {
+        this.list = inject(SelectionListDirective);
         this.support = injectFormSupport();
         this.size = input(FORM_FIELD_SIZES.MD, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -26425,6 +26543,9 @@ class SegmentedButtonGroupComponent {
             hintAnimatable: this.hintAnimatableRef,
         });
     }
+    focus(options) {
+        this.list.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SegmentedButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SegmentedButtonGroupComponent, isStandalone: true, selector: "et-segmented-button-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-tab-scale": "isTabsVariant()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-segmented-button-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content select=\"et-label\" />\n<ng-content select=\".et-segmented-button-group-label\" />\n\n<div class=\"et-segmented-button-group-buttons\">\n  <ng-content />\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-segmented-button-group-support\">\n    <div class=\"et-segmented-button-group-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-segmented-button-group-support-content et-segmented-button-group-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-segmented-button-group-support-content et-segmented-button-group-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-segmented-button-group-support-content et-segmented-button-group-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-segmented-button-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-segmented-button-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-segmented-button-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-segmented-button-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-segmented-button-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-segmented-button-group-track-padding{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-segmented-button-group-track-radius{syntax: \"<length>\"; inherits: true; initial-value: 10px;}et-segmented-button-group{display:flex;flex-direction:column;gap:var(--et-segmented-button-group-gap);color:var(--et-surface-color-solid, currentColor)}et-segmented-button-group>et-label,et-segmented-button-group .et-segmented-button-group-label{font-size:var(--et-segmented-button-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-segmented-button-group:where([data-size=sm]){--et-segmented-button-group-label-font-size: 12px;--et-segmented-button-group-gap: 8px}et-segmented-button-group:where([data-size=sm]) et-segmented-button{--et-segmented-button-padding-x: 10px;--et-segmented-button-padding-y: 4px;font-size:12px}et-segmented-button-group:where([data-size=lg]){--et-segmented-button-group-label-font-size: 14px;--et-segmented-button-group-gap: 12px}et-segmented-button-group:where([data-size=lg]) et-segmented-button{--et-segmented-button-padding-x: 18px;--et-segmented-button-padding-y: 8px;font-size:16px}et-segmented-button-group .et-segmented-button-group-buttons{display:inline-flex;align-self:flex-start;gap:2px;padding:var(--et-segmented-button-group-track-padding);border-radius:var(--et-segmented-button-group-track-radius);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-segmented-button-group[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}et-segmented-button-group:where([data-variant=tabs]) .et-segmented-button-group-buttons{gap:0;padding:0;border-radius:0;background-color:transparent;box-shadow:inset 0 calc(var(--et-tab-underline-size) * -1) 0 0 color-mix(in srgb,var(--et-surface-border-solid, currentColor) calc(var(--et-tab-baseline-opacity) * 100%),transparent)}et-segmented-button-group:where([data-variant=tabs])[data-error] .et-segmented-button-group-buttons{box-shadow:inset 0 calc(var(--et-tab-underline-size) * -1) 0 0 var(--et-theme-color-primary-solid)}et-segmented-button-group:where([data-variant=tabs]) et-segmented-button{--et-segmented-button-padding-x: var(--et-tab-padding-inline);--et-segmented-button-padding-y: var(--et-tab-padding-block);--et-segmented-button-tab-underline-size: var(--et-tab-underline-size);--et-segmented-button-tab-underline-radius: var(--et-tab-underline-radius);font-size:var(--et-tab-font-size)}et-segmented-button-group[data-mixed] .et-segmented-button-group-buttons{outline:1px dashed var(--et-theme-color-primary-solid, currentColor);outline-offset:-1px}et-segmented-button-group .et-segmented-button-group-support{overflow:clip;block-size:0}et-segmented-button-group .et-segmented-button-group-support-stack{position:relative;display:grid}et-segmented-button-group .et-segmented-button-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-segmented-button-group .et-segmented-button-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-segmented-button-group-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint{padding-block-start:4px;font-size:var(--et-segmented-button-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-segmented-button-group .et-segmented-button-group-hint:empty{display:none}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support{transition:block-size var(--et-segmented-button-group-support-duration) ease}et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content{transition:opacity var(--et-segmented-button-group-support-duration) ease,transform var(--et-segmented-button-group-support-duration) ease}@starting-style{et-segmented-button-group[data-can-animate] .et-segmented-button-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-segmented-button-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-segmented-button-group{--et-segmented-button-group-support-duration: 1ms;--et-segmented-button-group-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -27229,6 +27350,9 @@ class DateTimeInputComponent {
         this.paneAdvanceSpent.set(true);
         this.showPane(pane === 'time' ? 'time' : 'date');
     }
+    focus(options) {
+        this.dateTimeInput.focus(options);
+    }
     showPane(next) {
         if (next === this.activePane()) {
             return;
@@ -27614,6 +27738,9 @@ class DateTimeRangeInputComponent {
         this.paneAdvanceSpent.set(true);
         this.showPane(PANE_ORDER.find((candidate) => candidate === pane) ?? 'dates');
     }
+    focus(options) {
+        this.rangeInput.focus(options);
+    }
     showPane(next) {
         const current = this.activePane();
         if (next === current) {
@@ -27900,10 +28027,13 @@ class DurationInputDirective {
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.registeredField()?.focus();
+        this.registeredField()?.focus(options);
     }
     /** Clears the value and any uncommitted field text - wired to the styled input's clear button. */
     clearValue() {
@@ -27996,8 +28126,8 @@ class DurationInputFieldDirective {
         }
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     handleInput() {
         this.durationInput?.inputText.set(this.elementRef.nativeElement.value);
@@ -28077,6 +28207,9 @@ class DurationInputComponent {
         event.stopPropagation();
         this.durationInput.clearValue();
     }
+    focus(options) {
+        this.durationInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DurationInputComponent, isStandalone: true, selector: "et-duration-input", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "durationInput.activate()" }, classAttribute: "et-duration-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: DurationInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "durationFormat", "durationFormat", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<input class=\"et-duration-input-field\" etDurationInputField />\n\n@if (showClear()) {\n  <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n       mousedown is prevented so the field keeps focus (its blur would unmount this\n       button before the click could land) -->\n  <button\n    [attr.aria-label]=\"resolvedClearLabel()\"\n    (click)=\"handleClearClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-duration-input-clear\"\n    animate.enter=\"et-duration-input-clear--enter\"\n    animate.leave=\"et-duration-input-clear--leave\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{et-duration-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-duration-input .et-duration-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-duration-input .et-duration-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-duration-input .et-duration-input-field:disabled{cursor:not-allowed}et-duration-input[data-mixed] .et-duration-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-duration-input .et-duration-input-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;border:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);padding:0;margin:0;cursor:pointer;appearance:none}et-duration-input .et-duration-input-clear .et-icon{inline-size:16px;block-size:16px}@media(hover:hover){et-duration-input .et-duration-input-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-duration-input .et-duration-input-clear.et-duration-input-clear--enter{animation:et-duration-input-clear-in .15s ease}et-duration-input .et-duration-input-clear.et-duration-input-clear--leave{animation:et-duration-input-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-duration-input .et-duration-input-clear.et-duration-input-clear--enter,et-duration-input .et-duration-input-clear.et-duration-input-clear--leave{animation:none}}@keyframes et-duration-input-clear-in{0%{opacity:0}}@keyframes et-duration-input-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: DurationInputFieldDirective, selector: "input[etDurationInputField]", exportAs: ["etDurationInputField"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -28320,6 +28453,9 @@ class TimeInputComponent {
         event.stopPropagation();
         this.timeInput.clearValue();
     }
+    focus(options) {
+        this.timeInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-time-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"timeInput.maskPattern()\"\n  class=\"et-time-input-field\"\n  etTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [value]=\"timeInput.time()\"\n      [format]=\"timeInput.displayFormat()\"\n      [locale]=\"timeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [secondStep]=\"secondStep()\"\n      [min]=\"timeInput.minTime()\"\n      [max]=\"timeInput.maxTime()\"\n      [timeFilter]=\"timeInput.timeFilter()\"\n      (valueChange)=\"timeInput.selectTime($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeInputFieldDirective, selector: "input[etTimeInputField]", exportAs: ["etTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -28530,6 +28666,9 @@ class TimeRangeInputComponent {
         event.stopPropagation();
         this.rangeInput.clearRange();
     }
+    focus(options) {
+        this.rangeInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-time-range-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [format]=\"rangeInput.effectiveDisplayFormat()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [secondStep]=\"secondStep()\"\n      [min]=\"rangeInput.minTime()\"\n      [max]=\"rangeInput.maxTime()\"\n      [timeFilter]=\"rangeInput.timeFilter()\"\n      [startLabel]=\"startTimeLabel()\"\n      [endLabel]=\"endTimeLabel()\"\n      (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:11em;min-inline-size:0;container:et-time-range-input / inline-size;color:inherit}et-time-range-input .et-time-range-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-range-input .et-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-range-input .et-time-range-input-field:disabled{cursor:not-allowed}et-time-range-input[data-mixed] .et-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-time-range-input .et-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeRangeInputFieldDirective, selector: "input[etTimeRangeInputField]", exportAs: ["etTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -28997,10 +29136,13 @@ class DropzoneDirective {
         this.syncValue();
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.focusTarget()?.focus();
+        this.focusTarget()?.focus(options);
     }
     handleDragEnter(event) {
         if (this.disabled() || !event.dataTransfer?.types.includes('Files')) {
@@ -29313,6 +29455,9 @@ class DropzoneComponent {
             }
         });
     }
+    focus(options) {
+        this.dropzoneDir.focus(options);
+    }
     defaultUploadErrorMessage(entry) {
         const serverMessage = entry.errorMessage();
         return serverMessage
@@ -29550,6 +29695,122 @@ const createV2DropzoneUpload = (config) => ({
     deleteIncludesExisting: config.delete?.includeExisting ?? false,
 });
 
+const isRendered = (element) => element.isConnected && element.getClientRects().length > 0;
+const firstRenderedInvalidBinding = (field) => {
+    let first = null;
+    for (const error of field().errorSummary()) {
+        for (const binding of error.fieldTree().formFieldBindings()) {
+            if (!isRendered(binding.element)) {
+                continue;
+            }
+            const precedesFirst = !!first && (first.element.compareDocumentPosition(binding.element) & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+            if (!first || precedesFirst) {
+                first = binding;
+            }
+        }
+    }
+    return first;
+};
+/**
+ * Scrolls the first invalid field of `field` into view and focuses its control - what an invalid
+ * submit attempt should do, now that a submit button stays enabled while the form is invalid.
+ *
+ * "First" is the first field in DOM order, not in field-tree order, and fields that are not
+ * currently rendered (a collapsed section, another wizard step) are skipped - so the user lands on
+ * an error they can see and fix.
+ *
+ * `[etForm]` calls this on every failed submit. Call it directly from a hand-written submit handler
+ * or a `submission.onInvalid` hook.
+ *
+ * @returns Whether a field was found. `false` means no rendered field owns any of the form's errors -
+ *   a form-level error, for instance.
+ */
+const focusFirstInvalidField = (field, options) => {
+    const binding = firstRenderedInvalidBinding(field);
+    if (!binding) {
+        return false;
+    }
+    const element = binding.element;
+    const ownerDocument = element.ownerDocument;
+    const fieldShell = binding.injector.get(FORM_FIELD_TOKEN, null);
+    (fieldShell?.element ?? element).scrollIntoView({
+        block: options?.block ?? 'center',
+        inline: 'nearest',
+        behavior: options?.behavior ?? (matchesReducedMotion(element) ? 'auto' : 'smooth'),
+    });
+    if (options?.focus !== false) {
+        const activeBefore = ownerDocument.activeElement;
+        binding.focus({ preventScroll: true });
+        // Angular falls back to focusing the `[formField]` element itself for a control that implements
+        // no `focus()` - a no-op on a wrapper like `<et-input>`. Nothing moved and nothing was already
+        // focused inside, so go looking for the focusable descendant ourselves.
+        if (ownerDocument.activeElement === activeBefore && !element.contains(ownerDocument.activeElement)) {
+            focusElement(isFocusable(element, ownerDocument) ? element : (getFocusableElements(element, ownerDocument)[0] ?? null));
+        }
+    }
+    return true;
+};
+
+/**
+ * Wires a `<form>` to the signal form it edits: it submits through the form's own
+ * `submission.action`, and a submit that does not pass validation scrolls the first invalid field
+ * into view and focuses it.
+ *
+ * ```html
+ * <form [etForm]="form">…</form>
+ * ```
+ *
+ * The form declares what submitting means, so the template needs no handler and no
+ * `$event.preventDefault()`:
+ *
+ * ```ts
+ * protected form = form(this.model, mySchema, {
+ *   submission: { action: async (field) => save(field().value()) },
+ * });
+ * ```
+ *
+ * Leave the submit button enabled while the form is invalid. Submitting marks every field touched,
+ * which is what makes the errors appear, and the first one is scrolled to - a disabled button
+ * instead says "no" without ever saying why. Bind `[loading]="form().submitting()"` for the in-flight
+ * state, and keep `disabled` for reasons that are not validity (a missing permission, data still
+ * loading).
+ */
+class FormDirective {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'etForm' });
+    }
+    handleSubmit(event) {
+        event.preventDefault();
+        const field = this.field();
+        if (field().submitting()) {
+            return;
+        }
+        from(submit(field))
+            .pipe(tap((success) => {
+            if (!success) {
+                focusFirstInvalidField(field);
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: FormDirective, isStandalone: true, selector: "form[etForm]", inputs: { field: { classPropertyName: "field", publicName: "etForm", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "handleSubmit($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[etForm]',
+                    host: {
+                        novalidate: '',
+                        '(submit)': 'handleSubmit($event)',
+                    },
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "etForm", required: true }] }] } });
+
+/** `[etForm]` - submits a `<form>` through its signal form and lands the user on the first error. */
+const FORM_IMPORTS = [FormDirective];
+
 /**
  * How a value's "length" is measured when the consumer doesn't say. Strings and array-likes cover
  * every control that can meaningfully be counted (`et-input`/`et-textarea` and `et-tag-input`
@@ -29906,7 +30167,7 @@ class FormFieldComponent {
         this.formFieldDir.activate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-warning": "displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: a control's own clear / picker-trigger / reveal buttons hug\n       the field they belong to, and nothing may come between them and it. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it \u2014 a pending async validator must not\n       displace a clear button or a reveal toggle. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"errorActive() || null\"\n            [attr.data-direction]=\"errorDirection()\"\n            [attr.data-state]=\"errorState()\"\n            [etProvideColor]=\"errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"warningActive() || null\"\n            [attr.data-direction]=\"warningDirection()\"\n            [attr.data-state]=\"warningState()\"\n            [etProvideColor]=\"warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n            [attr.data-active]=\"hintActive() || null\"\n            [attr.data-direction]=\"hintDirection()\"\n            [attr.data-state]=\"hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Persistent, and outside the swapping stack: a reader who just crossed the limit needs the\n       error and the count that caused it at the same time. Carries the error theme so the counter's\n       own over-limit styling can reach the semantic error color even before the field shows an\n       error (an untouched field is not yet in its error state). -->\n      <div\n        #counterContent\n        [etProvideColor]=\"errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) )}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)));background:linear-gradient(to right,transparent,var(--et-surface-background-solid, transparent) var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-warning": "displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: a control's own clear / picker-trigger / reveal buttons hug\n       the field they belong to, and nothing may come between them and it. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it \u2014 a pending async validator must not\n       displace a clear button or a reveal toggle. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"errorActive() || null\"\n            [attr.data-direction]=\"errorDirection()\"\n            [attr.data-state]=\"errorState()\"\n            [etProvideColor]=\"errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"warningActive() || null\"\n            [attr.data-direction]=\"warningDirection()\"\n            [attr.data-state]=\"warningState()\"\n            [etProvideColor]=\"warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n            [attr.data-active]=\"hintActive() || null\"\n            [attr.data-direction]=\"hintDirection()\"\n            [attr.data-state]=\"hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Persistent, and outside the swapping stack: a reader who just crossed the limit needs the\n       error and the count that caused it at the same time. Carries the error theme so the counter's\n       own over-limit styling can reach the semantic error color even before the field shows an\n       error (an untouched field is not yet in its error state). -->\n      <div\n        #counterContent\n        [etProvideColor]=\"errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -29949,7 +30210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
                         '[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
                         '[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
-                    }, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: a control's own clear / picker-trigger / reveal buttons hug\n       the field they belong to, and nothing may come between them and it. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it \u2014 a pending async validator must not\n       displace a clear button or a reveal toggle. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"errorActive() || null\"\n            [attr.data-direction]=\"errorDirection()\"\n            [attr.data-state]=\"errorState()\"\n            [etProvideColor]=\"errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"warningActive() || null\"\n            [attr.data-direction]=\"warningDirection()\"\n            [attr.data-state]=\"warningState()\"\n            [etProvideColor]=\"warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n            [attr.data-active]=\"hintActive() || null\"\n            [attr.data-direction]=\"hintDirection()\"\n            [attr.data-state]=\"hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Persistent, and outside the swapping stack: a reader who just crossed the limit needs the\n       error and the count that caused it at the same time. Carries the error theme so the counter's\n       own over-limit styling can reach the semantic error color even before the field shows an\n       error (an untouched field is not yet in its error state). -->\n      <div\n        #counterContent\n        [etProvideColor]=\"errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) )}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)));background:linear-gradient(to right,transparent,var(--et-surface-background-solid, transparent) var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"] }]
+                    }, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: a control's own clear / picker-trigger / reveal buttons hug\n       the field they belong to, and nothing may come between them and it. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it \u2014 a pending async validator must not\n       displace a clear button or a reveal toggle. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"errorActive() || null\"\n            [attr.data-direction]=\"errorDirection()\"\n            [attr.data-state]=\"errorState()\"\n            [etProvideColor]=\"errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"warningActive() || null\"\n            [attr.data-direction]=\"warningDirection()\"\n            [attr.data-state]=\"warningState()\"\n            [etProvideColor]=\"warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n            [attr.data-active]=\"hintActive() || null\"\n            [attr.data-direction]=\"hintDirection()\"\n            [attr.data-state]=\"hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Persistent, and outside the swapping stack: a reader who just crossed the limit needs the\n       error and the count that caused it at the same time. Carries the error theme so the counter's\n       own over-limit styling can reach the semantic error color even before the field shows an\n       error (an untouched field is not yet in its error state). -->\n      <div\n        #counterContent\n        [etProvideColor]=\"errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], counterContent: [{ type: i0.ViewChild, args: ['counterContent', { isSignal: true }] }], controlFrame: [{ type: i0.ViewChild, args: ['controlFrame', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatable: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
 
 const FORM_FIELD_IMPORTS = [
@@ -30410,8 +30671,11 @@ class InputComponent {
     syncNativeValue(event) {
         this.inputDir.syncFromNativeInput(event.target);
     }
+    focus(options) {
+        this.inputDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: InputComponent, isStandalone: true, selector: "et-input", host: { listeners: { "click": "inputDir.activate()" }, classAttribute: "et-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: InputDirective, inputs: ["type", "type", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [type]=\"inputDir.type()\"\n  [value]=\"inputDir.displayValue()\"\n  [disabled]=\"inputDir.disabled()\"\n  [readOnly]=\"inputDir.readonly()\"\n  [required]=\"inputDir.required()\"\n  [placeholder]=\"inputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"inputDir.autocomplete() || null\"\n  [attr.name]=\"inputDir.name() || null\"\n  [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"inputDir.describedBy() || null\"\n  [attr.aria-label]=\"inputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n  [attr.data-text-align]=\"inputDir.textAlign()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"inputDir.focused.set(true)\"\n  (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n  class=\"et-input-native\"\n/>\n", styles: ["@layer components{et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}et-input[data-mixed] .et-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: InputComponent, isStandalone: true, selector: "et-input", host: { listeners: { "click": "inputDir.activate()" }, classAttribute: "et-input" }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: InputDirective, inputs: ["type", "type", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "mixed", "mixed", "touched", "touched", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [type]=\"inputDir.type()\"\n  [value]=\"inputDir.displayValue()\"\n  [disabled]=\"inputDir.disabled()\"\n  [readOnly]=\"inputDir.readonly()\"\n  [required]=\"inputDir.required()\"\n  [placeholder]=\"inputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"inputDir.autocomplete() || null\"\n  [attr.name]=\"inputDir.name() || null\"\n  [attr.aria-invalid]=\"inputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"inputDir.describedBy() || null\"\n  [attr.aria-label]=\"inputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"inputDir.labelId() || null\"\n  [attr.data-text-align]=\"inputDir.textAlign()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"inputDir.focused.set(true)\"\n  (blur)=\"inputDir.focused.set(false); inputDir.touched.set(true)\"\n  class=\"et-input-native\"\n/>\n", styles: ["@layer components{et-input{display:block;flex:1;min-inline-size:0;color:inherit}et-input .et-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-input .et-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-input .et-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-input .et-input-native[data-text-align=start]{text-align:start}et-input .et-input-native[data-text-align=center]{text-align:center}et-input .et-input-native[data-text-align=end]{text-align:end}et-input[data-mixed] .et-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -30425,6 +30689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                                 'textAlign',
                                 'value',
                                 'mixed',
+                                'touched',
                                 'mixedLabel',
                                 'disabled',
                                 'readonly',
@@ -30521,6 +30786,9 @@ class NumberInputComponent {
         this.repeatSub?.unsubscribe();
         this.repeatSub = null;
     }
+    focus(options) {
+        this.numberInputDir.focus(options);
+    }
     /**
      * Drag the stepper sideways to run the value, Figma-style. The press has already stepped once and
      * armed the auto-repeat by the time this can tell a drag from a click, so committing to the scrub
@@ -30577,7 +30845,7 @@ class NumberInputComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", inputs: { stepper: { classPropertyName: "stepper", publicName: "stepper", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "numberInputDir.activate()" }, properties: { "attr.data-stepper": "stepper() || null" }, classAttribute: "et-number-input" }, providers: [provideIcons(MINUS_ICON, PLUS_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NumberInputDirective, inputs: ["min", "min", "max", "max", "step", "step", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [value]=\"numberInputDir.displayValue()\"\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true)\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", inputs: { stepper: { classPropertyName: "stepper", publicName: "stepper", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "numberInputDir.activate()" }, properties: { "attr.data-stepper": "stepper() || null" }, classAttribute: "et-number-input" }, providers: [provideIcons(MINUS_ICON, PLUS_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NumberInputDirective, inputs: ["min", "min", "max", "max", "step", "step", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "mixed", "mixed", "touched", "touched", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [value]=\"numberInputDir.displayValue()\"\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true)\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
@@ -30593,6 +30861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                                 'textAlign',
                                 'value',
                                 'mixed',
+                                'touched',
                                 'mixedLabel',
                                 'disabled',
                                 'readonly',
@@ -30968,8 +31237,11 @@ class PasswordInputComponent {
         this.passwordDir.touched.set(true);
         this.passwordDir.syncCapsLock(event);
     }
+    focus(options) {
+        this.passwordDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PasswordInputComponent, isStandalone: true, selector: "et-password-input", inputs: { revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, capsLockLabel: { classPropertyName: "capsLockLabel", publicName: "capsLockLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "passwordDir.activate()" }, classAttribute: "et-password-input" }, providers: [provideIcons(EYE_ICON, EYE_SLASH_ICON, TRIANGLE_EXCLAMATION_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PasswordInputDirective, inputs: ["placeholder", "placeholder", "autocomplete", "autocomplete", "value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "revealed", "revealed", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "revealedChange", "revealedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [type]=\"passwordDir.inputType()\"\n  [value]=\"passwordDir.displayValue()\"\n  [disabled]=\"passwordDir.disabled()\"\n  [readOnly]=\"passwordDir.readonly()\"\n  [required]=\"passwordDir.required()\"\n  [placeholder]=\"passwordDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"passwordDir.autocomplete() || null\"\n  [attr.name]=\"passwordDir.name() || null\"\n  [attr.aria-invalid]=\"passwordDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"passwordDir.describedBy() || null\"\n  [attr.aria-label]=\"passwordDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"passwordDir.labelId() || null\"\n  (input)=\"syncNativeValue($event)\"\n  (keydown)=\"passwordDir.syncCapsLock($event)\"\n  (keyup)=\"passwordDir.syncCapsLock($event)\"\n  (mousedown)=\"passwordDir.syncCapsLock($event)\"\n  (focus)=\"passwordDir.focused.set(true)\"\n  (blur)=\"handleBlur($event)\"\n  class=\"et-password-input-native\"\n/>\n\n@if (showCapsLockWarning()) {\n  <span class=\"et-password-input-caps-warning\" role=\"status\">\n    <i [etTooltip]=\"resolvedCapsLockLabel()\" aria-hidden=\"true\" etIcon=\"et-triangle-exclamation\"></i>\n    <span class=\"et-password-input-caps-warning-text\">{{ resolvedCapsLockLabel() }}</span>\n  </span>\n}\n\n<ng-template etControlSuffix>\n  @if (revealable()) {\n    <button\n      [attr.aria-label]=\"passwordDir.revealed() ? resolvedHideLabel() : resolvedRevealLabel()\"\n      [attr.aria-pressed]=\"passwordDir.revealed()\"\n      [disabled]=\"passwordDir.disabled()\"\n      (click)=\"passwordDir.toggleRevealed(); $event.stopPropagation()\"\n      class=\"et-password-input-reveal\"\n      type=\"button\"\n    >\n      <i [etIcon]=\"passwordDir.revealed() ? 'et-eye-slash' : 'et-eye'\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-password-input-reveal-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-password-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-password-input .et-password-input-native{display:block;flex:1;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-password-input .et-password-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-password-input .et-password-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-password-input[data-mixed] .et-password-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-password-input .et-password-input-caps-warning{display:flex;align-items:center;flex:none;inline-size:var(--et-password-input-reveal-size);block-size:var(--et-password-input-reveal-size);color:var(--et-surface-color-muted-solid, currentColor)}et-password-input .et-password-input-caps-warning .et-icon{inline-size:100%;block-size:100%}et-password-input .et-password-input-caps-warning-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.et-password-input-reveal{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-password-input-reveal-size) + 8px);block-size:calc(var(--et-password-input-reveal-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none}.et-password-input-reveal .et-icon{inline-size:var(--et-password-input-reveal-size);block-size:var(--et-password-input-reveal-size)}@media(hover:hover){.et-password-input-reveal:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-password-input-reveal:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-password-input-reveal:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}.et-password-input-reveal:disabled{cursor:default;background:transparent;color:inherit}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: TooltipDirective, selector: "[etTooltip]", inputs: ["etTooltip", "etTooltipAriaDescription", "placement", "fallbackPlacements", "offset", "arrowPadding", "viewportPadding", "showDelay", "etTooltipDisabled"], exportAs: ["etTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PasswordInputComponent, isStandalone: true, selector: "et-password-input", inputs: { revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, revealLabel: { classPropertyName: "revealLabel", publicName: "revealLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, capsLockLabel: { classPropertyName: "capsLockLabel", publicName: "capsLockLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "passwordDir.activate()" }, classAttribute: "et-password-input" }, providers: [provideIcons(EYE_ICON, EYE_SLASH_ICON, TRIANGLE_EXCLAMATION_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PasswordInputDirective, inputs: ["placeholder", "placeholder", "autocomplete", "autocomplete", "value", "value", "mixed", "mixed", "touched", "touched", "mixedLabel", "mixedLabel", "revealed", "revealed", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "revealedChange", "revealedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [type]=\"passwordDir.inputType()\"\n  [value]=\"passwordDir.displayValue()\"\n  [disabled]=\"passwordDir.disabled()\"\n  [readOnly]=\"passwordDir.readonly()\"\n  [required]=\"passwordDir.required()\"\n  [placeholder]=\"passwordDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"passwordDir.autocomplete() || null\"\n  [attr.name]=\"passwordDir.name() || null\"\n  [attr.aria-invalid]=\"passwordDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"passwordDir.describedBy() || null\"\n  [attr.aria-label]=\"passwordDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"passwordDir.labelId() || null\"\n  (input)=\"syncNativeValue($event)\"\n  (keydown)=\"passwordDir.syncCapsLock($event)\"\n  (keyup)=\"passwordDir.syncCapsLock($event)\"\n  (mousedown)=\"passwordDir.syncCapsLock($event)\"\n  (focus)=\"passwordDir.focused.set(true)\"\n  (blur)=\"handleBlur($event)\"\n  class=\"et-password-input-native\"\n/>\n\n@if (showCapsLockWarning()) {\n  <span class=\"et-password-input-caps-warning\" role=\"status\">\n    <i [etTooltip]=\"resolvedCapsLockLabel()\" aria-hidden=\"true\" etIcon=\"et-triangle-exclamation\"></i>\n    <span class=\"et-password-input-caps-warning-text\">{{ resolvedCapsLockLabel() }}</span>\n  </span>\n}\n\n<ng-template etControlSuffix>\n  @if (revealable()) {\n    <button\n      [attr.aria-label]=\"passwordDir.revealed() ? resolvedHideLabel() : resolvedRevealLabel()\"\n      [attr.aria-pressed]=\"passwordDir.revealed()\"\n      [disabled]=\"passwordDir.disabled()\"\n      (click)=\"passwordDir.toggleRevealed(); $event.stopPropagation()\"\n      class=\"et-password-input-reveal\"\n      type=\"button\"\n    >\n      <i [etIcon]=\"passwordDir.revealed() ? 'et-eye-slash' : 'et-eye'\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-password-input-reveal-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-password-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-password-input .et-password-input-native{display:block;flex:1;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-password-input .et-password-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-password-input .et-password-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-password-input[data-mixed] .et-password-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-password-input .et-password-input-caps-warning{display:flex;align-items:center;flex:none;inline-size:var(--et-password-input-reveal-size);block-size:var(--et-password-input-reveal-size);color:var(--et-surface-color-muted-solid, currentColor)}et-password-input .et-password-input-caps-warning .et-icon{inline-size:100%;block-size:100%}et-password-input .et-password-input-caps-warning-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.et-password-input-reveal{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-password-input-reveal-size) + 8px);block-size:calc(var(--et-password-input-reveal-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none}.et-password-input-reveal .et-icon{inline-size:var(--et-password-input-reveal-size);block-size:var(--et-password-input-reveal-size)}@media(hover:hover){.et-password-input-reveal:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-password-input-reveal:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-password-input-reveal:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}.et-password-input-reveal:disabled{cursor:default;background:transparent;color:inherit}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: TooltipDirective, selector: "[etTooltip]", inputs: ["etTooltip", "etTooltipAriaDescription", "placement", "fallbackPlacements", "offset", "arrowPadding", "viewportPadding", "showDelay", "etTooltipDisabled"], exportAs: ["etTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
@@ -30981,6 +31253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                                 'autocomplete',
                                 'value',
                                 'mixed',
+                                'touched',
                                 'mixedLabel',
                                 'revealed',
                                 'disabled',
@@ -33292,6 +33565,9 @@ class RichTextEditorDirective {
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled())
             return;
         const el = this.editorDom.root();
@@ -33299,7 +33575,7 @@ class RichTextEditorDirective {
         // start, so only focus when the editor isn't already focused (e.g. a click on the frame padding).
         if (!el || el.ownerDocument.activeElement === el)
             return;
-        el.focus();
+        el.focus(options);
     }
     /**
      * Reads the DOM back into `value` and refreshes the toolbar state - the single point every edit
@@ -39612,6 +39888,9 @@ class RichTextEditorComponent {
                 break;
         }
     }
+    focus(options) {
+        this.dir.focus(options);
+    }
     /** Track the visual viewport so the docked (fixed) toolbar sits right above the on-screen
      *  keyboard: the inset is the gap from where `position: fixed; bottom: 0` actually renders (a
      *  measured probe - see below) down past the keyboard's top edge
@@ -39758,7 +40037,7 @@ class RichTextEditorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RichTextEditorComponent, isStandalone: true, selector: "et-rich-text-editor", host: { listeners: { "click": "dir.activate()" }, properties: { "class.et-rich-text-editor--touch": "hasTouchInput()", "class.et-rich-text-editor--docked-toolbar": "dockedToolbar()" }, classAttribute: "et-rich-text-editor" }, providers: [
             provideIcons(BOLD_ICON, ITALIC_ICON, UNDERLINE_ICON, STRIKETHROUGH_ICON, CODE_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON, QUOTE_ICON, CODE_BLOCK_ICON, UNDO_ICON, REDO_ICON),
-        ], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "tools", "tools", "autoformat", "autoformat", "labels", "labels"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div [attr.aria-label]=\"labels().toolbar\" class=\"et-rte-toolbar\" etToolbar>\n  @for (tool of dir.resolvedTools(); track $index) {\n    @switch (tool) {\n      @case (TOOLS.DIVIDER) {\n        <et-divider orientation=\"vertical\" decorative />\n      }\n      @default {\n        @if (dir.toolDefs.get(tool); as def) {\n          @if (def.control; as control) {\n            <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n          } @else {\n            <button\n              [pressed]=\"def.isActive?.(dir) ?? false\"\n              [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n              [attr.aria-label]=\"toolLabel(def)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"def.run?.(dir)\"\n              color=\"surface\"\n              pressedColor=\"inherit\"\n              et-icon-button\n              size=\"sm\"\n              type=\"button\"\n            >\n              <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n            </button>\n          }\n        }\n      }\n    }\n  }\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedBy() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"syncValueFromDom()\"\n  (beforeinput)=\"interceptFormattingCommand($event)\"\n  (keydown)=\"interceptEditorKeydown($event)\"\n  (paste)=\"interceptPaste($event)\"\n  (drop)=\"interceptDrop($event)\"\n  (click)=\"interceptClick($event)\"\n  (pointerdown)=\"dir.clearPendingMarks()\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block-start:6px;padding-block-end:calc(6px + max(var(--_et-rte-keyboard-inset, 0px),env(keyboard-inset-height,0px)));background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition:opacity .16s var(--ease-out-5, ease)}}et-rich-text-editor .et-rte-toolbar .et-divider{--et-divider-color: color-mix(in srgb, currentColor 12%, transparent);--et-divider-spacing: 2px;--et-divider-inset: 4px}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol,et-rich-text-editor .et-rte-content blockquote,et-rich-text-editor .et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}et-rich-text-editor .et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}et-rich-text-editor .et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: DividerComponent, selector: "et-divider", inputs: ["orientation", "decorative"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ToolbarDirective, selector: "[etToolbar]", inputs: ["orientation"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "tools", "tools", "autoformat", "autoformat", "labels", "labels"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div [attr.aria-label]=\"labels().toolbar\" class=\"et-rte-toolbar\" etToolbar>\n  @for (tool of dir.resolvedTools(); track $index) {\n    @switch (tool) {\n      @case (TOOLS.DIVIDER) {\n        <et-divider orientation=\"vertical\" decorative />\n      }\n      @default {\n        @if (dir.toolDefs.get(tool); as def) {\n          @if (def.control; as control) {\n            <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n          } @else {\n            <button\n              [pressed]=\"def.isActive?.(dir) ?? false\"\n              [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n              [attr.aria-label]=\"toolLabel(def)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"def.run?.(dir)\"\n              color=\"surface\"\n              pressedColor=\"inherit\"\n              et-icon-button\n              size=\"sm\"\n              type=\"button\"\n            >\n              <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n            </button>\n          }\n        }\n      }\n    }\n  }\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedBy() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"syncValueFromDom()\"\n  (beforeinput)=\"interceptFormattingCommand($event)\"\n  (keydown)=\"interceptEditorKeydown($event)\"\n  (paste)=\"interceptPaste($event)\"\n  (drop)=\"interceptDrop($event)\"\n  (click)=\"interceptClick($event)\"\n  (pointerdown)=\"dir.clearPendingMarks()\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block-start:6px;padding-block-end:calc(6px + max(var(--_et-rte-keyboard-inset, 0px),env(keyboard-inset-height,0px)));background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition:opacity .16s var(--ease-out-5, ease)}}et-rich-text-editor .et-rte-toolbar .et-divider{--et-divider-color: color-mix(in srgb, currentColor 12%, transparent);--et-divider-spacing: 2px;--et-divider-inset: 4px}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol,et-rich-text-editor .et-rte-content blockquote,et-rich-text-editor .et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}et-rich-text-editor .et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}et-rich-text-editor .et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: DividerComponent, selector: "et-divider", inputs: ["orientation", "decorative"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ToolbarDirective, selector: "[etToolbar]", inputs: ["orientation"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -39769,6 +40048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             directive: RichTextEditorDirective,
                             inputs: [
                                 'value',
+                                'touched',
                                 'disabled',
                                 'readonly',
                                 'hidden',
@@ -39868,6 +40148,8 @@ class MultiLanguageRichTextEditorComponent {
          *  `null` uses the default toolbar. */
         this.tools = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tools" }] : /* istanbul ignore next */ []));
+        this.editor = viewChild(RichTextEditorComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
         /** The embedded editor's tools with the language switcher prepended, so it always leads the bar. */
         this.innerTools = computed(() => [
             RICH_TEXT_EDITOR_LANGUAGE_TOOL,
@@ -39876,19 +40158,22 @@ class MultiLanguageRichTextEditorComponent {
         ], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "innerTools" }] : /* istanbul ignore next */ []));
     }
+    focus(options) {
+        this.editor()?.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultiLanguageRichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MultiLanguageRichTextEditorComponent, isStandalone: true, selector: "et-multi-language-rich-text-editor", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoformat: { classPropertyName: "autoformat", publicName: "autoformat", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-multi-language-rich-text-editor" }, providers: [provideRichTextEditorLanguageTool()], hostDirectives: [{ directive: MultiLanguageRichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "languages", "languages"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<et-rich-text-editor\n  [value]=\"dir.activeMarkdown()\"\n  [disabled]=\"dir.disabled()\"\n  [readonly]=\"dir.readonly()\"\n  [invalid]=\"dir.invalid()\"\n  [errors]=\"dir.errors()\"\n  [required]=\"dir.required()\"\n  [placeholder]=\"placeholder()\"\n  [tools]=\"innerTools()\"\n  [autoformat]=\"autoformat()\"\n  (valueChange)=\"dir.writeActiveMarkdown($event)\"\n  (touchedChange)=\"dir.touched.set($event)\"\n/>\n", styles: ["@layer components{.et-multi-language-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0}}\n"], dependencies: [{ kind: "component", type: RichTextEditorComponent, selector: "et-rich-text-editor" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MultiLanguageRichTextEditorComponent, isStandalone: true, selector: "et-multi-language-rich-text-editor", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoformat: { classPropertyName: "autoformat", publicName: "autoformat", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-multi-language-rich-text-editor" }, providers: [provideRichTextEditorLanguageTool()], viewQueries: [{ propertyName: "editor", first: true, predicate: RichTextEditorComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: MultiLanguageRichTextEditorDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "languages", "languages"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<et-rich-text-editor\n  [value]=\"dir.activeMarkdown()\"\n  [disabled]=\"dir.disabled()\"\n  [readonly]=\"dir.readonly()\"\n  [invalid]=\"dir.invalid()\"\n  [errors]=\"dir.errors()\"\n  [required]=\"dir.required()\"\n  [placeholder]=\"placeholder()\"\n  [tools]=\"innerTools()\"\n  [autoformat]=\"autoformat()\"\n  (valueChange)=\"dir.writeActiveMarkdown($event)\"\n  (touchedChange)=\"dir.touched.set($event)\"\n/>\n", styles: ["@layer components{.et-multi-language-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0}}\n"], dependencies: [{ kind: "component", type: RichTextEditorComponent, selector: "et-rich-text-editor" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultiLanguageRichTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-multi-language-rich-text-editor', encapsulation: ViewEncapsulation.None, imports: [...RICH_TEXT_EDITOR_IMPORTS], providers: [provideRichTextEditorLanguageTool()], hostDirectives: [
                         {
                             directive: MultiLanguageRichTextEditorDirective,
-                            inputs: ['value', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name', 'languages'],
+                            inputs: ['value', 'touched', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name', 'languages'],
                             outputs: ['valueChange', 'touchedChange'],
                         },
                     ], host: { class: 'et-multi-language-rich-text-editor' }, template: "<et-rich-text-editor\n  [value]=\"dir.activeMarkdown()\"\n  [disabled]=\"dir.disabled()\"\n  [readonly]=\"dir.readonly()\"\n  [invalid]=\"dir.invalid()\"\n  [errors]=\"dir.errors()\"\n  [required]=\"dir.required()\"\n  [placeholder]=\"placeholder()\"\n  [tools]=\"innerTools()\"\n  [autoformat]=\"autoformat()\"\n  (valueChange)=\"dir.writeActiveMarkdown($event)\"\n  (touchedChange)=\"dir.touched.set($event)\"\n/>\n", styles: ["@layer components{.et-multi-language-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0}}\n"] }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autoformat: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoformat", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }] } });
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autoformat: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoformat", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], editor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RichTextEditorComponent), { isSignal: true }] }] } });
 
 const MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS = [
     MultiLanguageRichTextEditorComponent,
@@ -39971,10 +40256,13 @@ class OtpInputDirective {
         }
     }
     activate() {
+        this.focus({ preventScroll: true });
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.nativeControl()?.focus({ preventScroll: true });
+        this.nativeControl()?.focus(options);
     }
     /** Strips characters outside the charset and truncates to `length` - pastes included. */
     sanitize(raw) {
@@ -40073,6 +40361,9 @@ class OtpInputComponent {
             hintAnimatable: this.hintAnimatableRef,
         });
     }
+    focus(options) {
+        this.otp.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: OtpInputComponent, isStandalone: true, selector: "et-otp-input", host: { listeners: { "click": "otp.activate()" }, properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-otp-input" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: OtpInputDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "length", "length", "charset", "charset", "masked", "masked"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange", "complete", "complete"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n<div class=\"et-otp-input-field\">\n  <div class=\"et-otp-input-segments\" aria-hidden=\"true\">\n    @for (index of segmentIndexes(); track index) {\n      <div\n        [attr.data-caret]=\"(otp.focused() && otp.caretIndex() === index) || null\"\n        [attr.data-filled]=\"otp.segmentChars()[index] !== null || null\"\n        class=\"et-otp-input-segment\"\n      >\n        @if (otp.segmentChars()[index]; as char) {\n          <span class=\"et-otp-input-segment-char\">{{ char }}</span>\n        } @else if (otp.focused() && otp.caretIndex() === index) {\n          <span class=\"et-otp-input-caret\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- one real input stretched invisibly over the segments: reliable SMS autofill\n       (autocomplete=\"one-time-code\") and native paste for free -->\n  <input\n    #nativeInput\n    [attr.aria-describedby]=\"otp.describedBy() || null\"\n    [attr.aria-invalid]=\"otp.shouldDisplayError() || null\"\n    [attr.aria-labelledby]=\"otp.labelId() || null\"\n    [attr.inputmode]=\"otp.inputMode()\"\n    [attr.maxlength]=\"otp.length()\"\n    [attr.name]=\"otp.name() || null\"\n    [disabled]=\"otp.disabled()\"\n    [readOnly]=\"otp.readonly()\"\n    [required]=\"otp.required()\"\n    [value]=\"otp.value()\"\n    (blur)=\"otp.handleNativeBlur()\"\n    (focus)=\"otp.handleNativeFocus()\"\n    (input)=\"otp.handleNativeInput()\"\n    (keyup)=\"otp.handleNativeSelectionEvent()\"\n    (mouseup)=\"otp.handleNativeSelectionEvent()\"\n    class=\"et-otp-input-native\"\n    autocapitalize=\"off\"\n    autocomplete=\"one-time-code\"\n    spellcheck=\"false\"\n    type=\"text\"\n  />\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-otp-input-support\">\n    <div class=\"et-otp-input-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-otp-input-support-content et-otp-input-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-otp-input-support-content et-otp-input-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-otp-input-support-content et-otp-input-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@keyframes et-otp-input-caret-blink{0%{opacity:1}to{opacity:0}}@property --et-otp-input-segment-size{syntax: \"<length>\"; inherits: true; initial-value: 44px;}@property --et-otp-input-segment-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-otp-input-segment-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-otp-input-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-otp-input-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-otp-input-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-otp-input-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-otp-input-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-otp-input-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-otp-input{display:inline-flex;flex-direction:column;gap:6px;color:var(--et-surface-color-solid, currentColor)}et-otp-input>et-label{font-size:var(--et-otp-input-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-field{position:relative;inline-size:fit-content}et-otp-input .et-otp-input-segments{display:flex;gap:var(--et-otp-input-segment-gap)}et-otp-input .et-otp-input-segment{display:flex;align-items:center;justify-content:center;inline-size:var(--et-otp-input-segment-size);block-size:var(--et-otp-input-segment-size);border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));border-radius:var(--et-otp-input-segment-radius);font-size:calc(var(--et-otp-input-segment-size) * .45);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-segment[data-caret]{border-color:var(--et-theme-color-primary-solid, currentColor);outline:1px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-1px}et-otp-input .et-otp-input-segment .et-otp-input-segment-char{display:block}et-otp-input .et-otp-input-segment .et-otp-input-caret{inline-size:2px;block-size:1.1em;border-radius:1px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-otp-input-caret-blink 1.1s steps(2,jump-none) infinite}et-otp-input .et-otp-input-native{position:absolute;inset:0;inline-size:100%;block-size:100%;border:none;outline:none;padding:0;margin:0;background:transparent;color:transparent;caret-color:transparent;font-size:max(1em,16px)}et-otp-input .et-otp-input-native::selection{background:transparent}et-otp-input .et-otp-input-native:disabled{cursor:not-allowed}et-otp-input[data-error] .et-otp-input-segment{border-color:var(--et-theme-color-primary-solid, currentColor)}et-otp-input:has(.et-otp-input-native:disabled){opacity:.4}et-otp-input:has(.et-otp-input-native:disabled) .et-otp-input-segment{-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-support{overflow:clip;block-size:0}et-otp-input .et-otp-input-support-stack{position:relative;display:grid}et-otp-input .et-otp-input-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-otp-input .et-otp-input-support-content[data-active]{opacity:1;transform:translateY(0)}et-otp-input .et-otp-input-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-otp-input-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-otp-input .et-otp-input-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-otp-input-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-otp-input .et-otp-input-hint{padding-block-start:4px;font-size:var(--et-otp-input-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-otp-input .et-otp-input-hint:empty{display:none}et-otp-input[data-can-animate] .et-otp-input-support{transition:block-size var(--et-otp-input-support-duration) ease}et-otp-input[data-can-animate] .et-otp-input-support-content{transition:opacity var(--et-otp-input-support-duration) ease,transform var(--et-otp-input-support-duration) ease}@starting-style{et-otp-input[data-can-animate] .et-otp-input-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-otp-input-support-offset) * -1))}}et-otp-input[data-can-animate] .et-otp-input-segment{transition:border-color .12s ease,outline-color .12s ease}et-otp-input[data-can-animate] .et-otp-input-segment-char{transition:transform .14s cubic-bezier(.2,1.4,.4,1),opacity .1s ease}@starting-style{et-otp-input[data-can-animate] .et-otp-input-segment-char{transform:scale(.4);opacity:0}}@media(prefers-reduced-motion:reduce){et-otp-input{--et-otp-input-support-duration: 1ms;--et-otp-input-support-offset: 0px}et-otp-input .et-otp-input-caret{animation:none}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -40465,10 +40756,13 @@ class PhoneInputDirective {
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.registeredField()?.focus();
+        this.registeredField()?.focus(options);
     }
     /** Clears the number (the selected country stays) - wired to the styled input's clear button. */
     clearValue() {
@@ -40580,8 +40874,8 @@ class PhoneInputFieldDirective {
         }
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     handleInput() {
         this.phoneInput?.setNationalInput(this.elementRef.nativeElement.value);
@@ -40808,6 +41102,10 @@ const SELECT_FILTER_MODES = {
     /** The consumer reacts to `queryChange` (drives an `@for` / a query); the select hides nothing. */
     EXTERNAL: 'external',
 };
+// Above this many visible data-driven rows the select windows their rendering. Comfortably past
+// what a panel shows at once (its default max height over the row estimate, plus overscan on
+// both sides), so a list that windowing would render in full anyway stays unwindowed.
+const VIRTUALIZATION_MIN_ITEMS = 40;
 const defaultNormalizeCustomValue = (raw) => {
     const trimmed = raw.trim();
     return trimmed.length ? trimmed : null;
@@ -40844,10 +41142,11 @@ class SelectDirective {
         ...(ngDevMode ? [{ debugName: "mixedLabel" }] : /* istanbul ignore next */ []));
         /**
          * Data-driven options: the select owns the option rows instead of the consumer projecting
-         * `et-select-option`s, and windows their rendering (virtualization) - only rows near the
-         * viewport exist in the DOM, so lists with thousands of entries stay cheap. Renders via
-         * `virtualizedItems()` between the `virtualWindow` block paddings; row content is the
-         * plain `label` or an `etSelectOptionTemplate`. Values must be unique. Can be combined
+         * `et-select-option`s. Long lists have their rendering windowed (virtualization) - only rows
+         * near the viewport exist in the DOM, so lists with thousands of entries stay cheap; short
+         * ones render in full. Renders via `virtualizedItems()` between the `virtualWindow` block
+         * paddings; row content is the plain `label` or an `etSelectOptionTemplate`. Values must be
+         * unique. Can be combined
          * with projected options (e.g. a pinned row), which render normally and are not windowed.
          */
         this.options = input(null, /* @ts-ignore */
@@ -41150,22 +41449,30 @@ class SelectDirective {
         /** @internal The query-visible slice of data-driven options - the virtual window renders these. */
         this.visibleDataItems = computed(() => this.visibleItems().filter((item) => !!item.data), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleDataItems" }] : /* istanbul ignore next */ []));
+        /**
+         * @internal Whether the data-driven rows are windowed. A list that stays near a panel's
+         * worth of rows renders in full: windowing it would render all of them anyway (viewport
+         * plus overscan) while still costing a scroll listener, per-row mount churn and the
+         * viewport's width floor.
+         */
+        this.windowsOptions = computed(() => this.visibleDataItems().length > VIRTUALIZATION_MIN_ITEMS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "windowsOptions" }] : /* istanbul ignore next */ []));
         /**
          * The window over the data-driven rows: `paddingTop()`/`paddingBottom()` stand in for the
          * scroll height of everything outside `virtualizedItems()` - apply them as block paddings
          * around the rendered rows.
          */
         this.virtualWindow = createVirtualWindow({
-            // only meaningful with data-driven options - without them, don't track the viewport at all
-            container: computed(() => (this.options() ? (this.registeredViewport()?.elementRef.nativeElement ?? null) : null)),
+            // only meaningful with enough data-driven options - otherwise don't track the viewport at all
+            container: computed(() => this.windowsOptions() ? (this.registeredViewport()?.elementRef.nativeElement ?? null) : null),
             itemCount: computed(() => this.visibleDataItems().length),
             estimateItemHeight: 36,
             overscan: 5,
         });
         /**
-         * The windowed slice of data-driven options to render - every visible one while no
-         * `etSelectViewport` is registered. Render with `etSelectVirtualOption` rows between the
-         * `virtualWindow` block paddings.
+         * The windowed slice of data-driven options to render - every visible one while the list is
+         * short enough to render in full or no `etSelectViewport` is registered. Render with
+         * `etSelectVirtualOption` rows between the `virtualWindow` block paddings.
          */
         this.virtualizedItems = computed(() => {
             const items = this.visibleDataItems();
@@ -41403,15 +41710,18 @@ class SelectDirective {
         }
     }
     activate() {
+        this.focus({ preventScroll: true });
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
         const search = this.registeredSearch();
         if (search) {
-            search.focus();
+            search.focus(options);
             return;
         }
-        this.registeredTrigger()?.elementRef.nativeElement.focus({ preventScroll: true });
+        this.registeredTrigger()?.elementRef.nativeElement.focus(options);
     }
     /** @internal Commits an option as the (or a) selected value. Single select closes afterwards. */
     commitOption(item) {
@@ -42322,7 +42632,29 @@ class SelectSearchDirective {
             return ids.filter((id) => !!id).join(' ') || null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        // the last placeholder this directive wrote - anything else on the element came from the
+        // consumer (a static attribute or their own binding) and owns it from then on
+        this.writtenPlaceholder = null;
+        // an inline input replaces the trigger's value display, so it also has to carry the select's
+        // placeholder - the trigger renders none while a search is registered
+        this.fallbackPlaceholder = computed(() => {
+            const select = this.select;
+            if (!select || !this.isInlineInTrigger() || select.hasValue()) {
+                return '';
+            }
+            return select.placeholder();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fallbackPlaceholder" }] : /* istanbul ignore next */ []));
         registerSingleton(this.select?.registeredSearch, this);
+        effect(() => {
+            const placeholder = this.fallbackPlaceholder();
+            const element = this.elementRef.nativeElement;
+            if (element.placeholder && element.placeholder !== this.writtenPlaceholder) {
+                return;
+            }
+            this.writtenPlaceholder = placeholder;
+            element.placeholder = placeholder;
+        });
         effect(() => {
             const element = this.elementRef.nativeElement;
             const query = this.query();
@@ -42366,8 +42698,8 @@ class SelectSearchDirective {
         return this.document.activeElement === this.elementRef.nativeElement;
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     /** @internal Selects a displayed value label on open, so typing replaces it (single select). */
     handleOpened() {
@@ -42782,7 +43114,7 @@ class SelectViewportDirective {
         // scroll, as long labels enter and leave the window
         this.locksWidth = computed(() => {
             const select = this.select;
-            return !!select?.options() && !select.mirrorPanelWidth();
+            return !!select?.windowsOptions() && !select.mirrorPanelWidth();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "locksWidth" }] : /* istanbul ignore next */ []));
         this.widthFloor = linkedSignal({ ...(ngDevMode ? { debugName: "widthFloor" } : /* istanbul ignore next */ {}), 
@@ -43470,8 +43802,11 @@ class SelectComponent {
         this.select.toggle();
         this.select.activate();
     }
+    focus(options) {
+        this.select.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, addNewLabel: { classPropertyName: "addNewLabel", publicName: "addNewLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "options", "options", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "customValueSeparators", "customValueSeparators", "normalizeCustomValue", "normalizeCustomValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "error", "error", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n           inline search input, tag-input style -->\n      <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n           remove affordance -->\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n       only while the panel is closed; open, the panel carries the news. Overlays the value's tail\n       behind a fade instead of claiming a column of its own, so the value never re-wraps for it -->\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel>\n    @if (select.options()) {\n      <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n           only rows near the viewport exist in the DOM; the block paddings stand in for the\n           scroll height of everything outside the window -->\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.value()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n         Enter commits it and it is keyboard-reachable while options still match the query.\n         Its label is the candidate itself \u2014 that is what commits and what the label cache\n         stores; the \"Create\" prefix is display-only. -->\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n         (display: contents, so they still flow within the scrolling panel) -->\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      <!-- Refetching over options that are already on screen: they stay put and a 2px indeterminate\n           bar at the panel's top edge carries the news (the table does the same over its rows). Out\n           of flow on purpose \u2014 a bar that took a row's worth of space would resize the panel. -->\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        <!-- The row is here from the first frame so the panel opens at the height the options will\n             need, but its content waits for `showLoadingIndicator()`: a response that lands inside\n             that window replaces an empty row rather than a spinner nobody had time to read. -->\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <!-- laid out from the first frame and only faded in later, so the row cannot change\n                 height when the spinner arrives; hidden from assistive tech until it does -->\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <!-- the control's own box, minus the control: same height, same separator, so the page\n               that is on its way is announced without moving anything -->\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <!-- disabled while its page loads: `requestLoadMore` is a no-op until that settles, and a\n               live-looking control that does nothing reads as broken -->\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n             through the consumer's own UI (e.g. a button next to the field) -->\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{--_et-select-trigger-busy-fade: 24px;position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + 16px + 6px));background:linear-gradient(to right,transparent,var(--et-surface-background-solid, transparent) var(--_et-select-trigger-busy-fade));color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, addNewLabel: { classPropertyName: "addNewLabel", publicName: "addNewLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "options", "options", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "customValueSeparators", "customValueSeparators", "normalizeCustomValue", "normalizeCustomValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "error", "error", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n           inline search input, tag-input style -->\n      <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n           remove affordance -->\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n       only while the panel is closed; open, the panel carries the news. Overlays the value's tail\n       behind a fade instead of claiming a column of its own, so the value never re-wraps for it -->\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel>\n    @if (select.options()) {\n      <!-- data-driven mode: the select owns the option rows and windows the rendering of a long\n           list \u2014 only rows near the viewport exist in the DOM; the block paddings stand in for\n           the scroll height of everything outside the window -->\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.value()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n         Enter commits it and it is keyboard-reachable while options still match the query.\n         Its label is the candidate itself \u2014 that is what commits and what the label cache\n         stores; the \"Create\" prefix is display-only. -->\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n         (display: contents, so they still flow within the scrolling panel) -->\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      <!-- Refetching over options that are already on screen: they stay put and a 2px indeterminate\n           bar at the panel's top edge carries the news (the table does the same over its rows). Out\n           of flow on purpose \u2014 a bar that took a row's worth of space would resize the panel. -->\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        <!-- The row is here from the first frame so the panel opens at the height the options will\n             need, but its content waits for `showLoadingIndicator()`: a response that lands inside\n             that window replaces an empty row rather than a spinner nobody had time to read. -->\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <!-- laid out from the first frame and only faded in later, so the row cannot change\n                 height when the spinner arrives; hidden from assistive tech until it does -->\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <!-- the control's own box, minus the control: same height, same separator, so the page\n               that is on its way is announced without moving anything -->\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <!-- disabled while its page loads: `requestLoadMore` is a no-op until that settles, and a\n               live-looking control that does nothing reads as broken -->\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n             through the consumer's own UI (e.g. a button next to the field) -->\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -43536,7 +43871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         ColorInteractiveDirective,
                     ], host: {
                         class: 'et-select',
-                    }, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n           inline search input, tag-input style -->\n      <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n           remove affordance -->\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n       only while the panel is closed; open, the panel carries the news. Overlays the value's tail\n       behind a fade instead of claiming a column of its own, so the value never re-wraps for it -->\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel>\n    @if (select.options()) {\n      <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n           only rows near the viewport exist in the DOM; the block paddings stand in for the\n           scroll height of everything outside the window -->\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.value()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n         Enter commits it and it is keyboard-reachable while options still match the query.\n         Its label is the candidate itself \u2014 that is what commits and what the label cache\n         stores; the \"Create\" prefix is display-only. -->\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n         (display: contents, so they still flow within the scrolling panel) -->\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      <!-- Refetching over options that are already on screen: they stay put and a 2px indeterminate\n           bar at the panel's top edge carries the news (the table does the same over its rows). Out\n           of flow on purpose \u2014 a bar that took a row's worth of space would resize the panel. -->\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        <!-- The row is here from the first frame so the panel opens at the height the options will\n             need, but its content waits for `showLoadingIndicator()`: a response that lands inside\n             that window replaces an empty row rather than a spinner nobody had time to read. -->\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <!-- laid out from the first frame and only faded in later, so the row cannot change\n                 height when the spinner arrives; hidden from assistive tech until it does -->\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <!-- the control's own box, minus the control: same height, same separator, so the page\n               that is on its way is announced without moving anything -->\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <!-- disabled while its page loads: `requestLoadMore` is a no-op until that settles, and a\n               live-looking control that does nothing reads as broken -->\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n             through the consumer's own UI (e.g. a button next to the field) -->\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{--_et-select-trigger-busy-fade: 24px;position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + 16px + 6px));background:linear-gradient(to right,transparent,var(--et-surface-background-solid, transparent) var(--_et-select-trigger-busy-fade));color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
+                    }, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n           inline search input, tag-input style -->\n      <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n           remove affordance -->\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n       only while the panel is closed; open, the panel carries the news. Overlays the value's tail\n       behind a fade instead of claiming a column of its own, so the value never re-wraps for it -->\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel>\n    @if (select.options()) {\n      <!-- data-driven mode: the select owns the option rows and windows the rendering of a long\n           list \u2014 only rows near the viewport exist in the DOM; the block paddings stand in for\n           the scroll height of everything outside the window -->\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.value()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n         Enter commits it and it is keyboard-reachable while options still match the query.\n         Its label is the candidate itself \u2014 that is what commits and what the label cache\n         stores; the \"Create\" prefix is display-only. -->\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n         (display: contents, so they still flow within the scrolling panel) -->\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      <!-- Refetching over options that are already on screen: they stay put and a 2px indeterminate\n           bar at the panel's top edge carries the news (the table does the same over its rows). Out\n           of flow on purpose \u2014 a bar that took a row's worth of space would resize the panel. -->\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        <!-- The row is here from the first frame so the panel opens at the height the options will\n             need, but its content waits for `showLoadingIndicator()`: a response that lands inside\n             that window replaces an empty row rather than a spinner nobody had time to read. -->\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <!-- laid out from the first frame and only faded in later, so the row cannot change\n                 height when the spinner arrives; hidden from assistive tech until it does -->\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <!-- the control's own box, minus the control: same height, same separator, so the page\n               that is on its way is announced without moving anything -->\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <!-- disabled while its page loads: `requestLoadMore` is a no-op until that settles, and a\n               live-looking control that does nothing reads as broken -->\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n             through the consumer's own UI (e.g. a button next to the field) -->\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], addNewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addNewLabel", required: false }] }], createLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
 
 const SELECT_IMPORTS = [
@@ -43624,6 +43959,9 @@ class PhoneInputComponent {
             this.phone.activate();
         }
     }
+    focus(options) {
+        this.phone.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PhoneInputComponent, isStandalone: true, selector: "et-phone-input", inputs: { countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-phone-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: PhoneInputDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "defaultCountry", "defaultCountry", "preferredCountries", "preferredCountries"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- headless select composition: compact flag trigger, searchable country panel -->\n<div\n  [value]=\"phone.country()\"\n  (valueChange)=\"handleCountryChange($event)\"\n  class=\"et-phone-input-country\"\n  mirrorPanelWidth=\"false\"\n  etFormFieldBarrier\n  etSelect\n>\n  <button\n    [attr.aria-label]=\"resolvedCountryLabel()\"\n    [disabled]=\"phone.disabled()\"\n    class=\"et-phone-input-country-trigger\"\n    etSelectTrigger\n    type=\"button\"\n  >\n    <span class=\"et-phone-input-country-flag\" aria-hidden=\"true\">\n      @if (phone.registeredFlagTemplate(); as flagTemplate) {\n        <ng-template [ngTemplateOutlet]=\"flagTemplate.templateRef\" [ngTemplateOutletContext]=\"activeFlagContext()\" />\n      } @else {\n        {{ activeFlag() }}\n      }\n    </span>\n    <span class=\"et-phone-input-dial-code\">+{{ phone.dialCode() }}</span>\n  </button>\n\n  <ng-template etSelectSurface let-select>\n    <et-select-panel class=\"et-phone-input-country-panel\">\n      <div class=\"et-phone-input-country-search\">\n        <input [placeholder]=\"phoneInputLabels().searchCountries\" etSelectSearch />\n      </div>\n\n      <!-- the label carries the dial code too, so searching by \"+49\" / \"49\" works -->\n      @for (country of countries(); track country.iso2) {\n        <et-select-option [label]=\"country.name + ' +' + country.dialCode\" [value]=\"country.iso2\">\n          <span class=\"et-phone-input-option-flag\" aria-hidden=\"true\">\n            @if (phone.registeredFlagTemplate(); as flagTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"flagTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: country }\"\n              />\n            } @else {\n              {{ country.flag }}\n            }\n          </span>\n          <span class=\"et-phone-input-option-name\">{{ country.name }}</span>\n          <span class=\"et-phone-input-option-dial\">+{{ country.dialCode }}</span>\n        </et-select-option>\n      }\n\n      @if (!select.visibleItems().length) {\n        <div class=\"et-select-state et-select-state--empty\">{{ phoneInputLabels().noCountries }}</div>\n      }\n    </et-select-panel>\n  </ng-template>\n</div>\n\n<input class=\"et-phone-input-field\" etPhoneInputField />\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n</ng-template>\n", styles: ["@layer components{et-phone-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-phone-input .et-phone-input-country-trigger{display:flex;align-items:center;gap:4px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;cursor:pointer;appearance:none;white-space:nowrap}et-phone-input .et-phone-input-country-trigger:disabled{cursor:not-allowed}et-phone-input .et-phone-input-country-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px;border-radius:4px}et-phone-input .et-phone-input-country-flag{display:inline-flex;align-items:center}et-phone-input .et-phone-input-dial-code{color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-phone-input .et-phone-input-field:disabled{cursor:not-allowed}et-phone-input[data-mixed] .et-phone-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-phone-input-country-panel{inline-size:min(320px,calc(100vw - 24px))}.et-phone-input-country-search{position:sticky;inset-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-inline:calc(var(--et-select-panel-padding, 6px) * -1);padding:var(--et-select-panel-padding, 6px);background:var(--et-surface-background-solid, rgb(32 32 32));z-index:1}.et-phone-input-country-search input[etselectsearch]{inline-size:100%;block-size:36px;box-sizing:border-box;padding-inline:10px;border-radius:6px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;caret-color:var(--et-theme-color-primary-solid, currentColor);transition:border-color .12s ease,background .12s ease}.et-phone-input-country-search input[etselectsearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-phone-input-country-search input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-phone-input-country-panel .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);flex:1;min-inline-size:0}.et-phone-input-option-flag{flex:none;display:inline-flex;align-items:center;justify-content:center}.et-phone-input-option-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-phone-input-option-dial{flex:none;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}.et-phone-input-country-flag :is(img,svg),.et-phone-input-option-flag :is(img,svg){display:block;inline-size:20px;block-size:auto}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: FormFieldBarrierDirective, selector: "[etFormFieldBarrier]" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "directive", type: SelectDirective, selector: "[etSelect]", inputs: ["value", "mixed", "touched", "open", "multiple", "disabled", "readonly", "invalid", "errors", "required", "name", "placeholder", "mixedLabel", "options", "filterMode", "allowCustomValues", "customValueSeparators", "normalizeCustomValue", "commitCustomValueOnClose", "maxSelection", "allowAddNew", "loading", "error", "hasMoreItems", "mirrorPanelWidth", "pickOnly", "aria-label", "aria-labelledby"], outputs: ["valueChange", "mixedChange", "touchedChange", "openChange", "queryChange", "loadMore", "addNew", "pickOption"], exportAs: ["etSelect"] }, { kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: SelectSearchDirective, selector: "input[etSelectSearch]", inputs: ["query"], outputs: ["queryChange"], exportAs: ["etSelectSearch"] }, { kind: "directive", type: PhoneInputFieldDirective, selector: "input[etPhoneInputField]", exportAs: ["etPhoneInputField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -43745,10 +44083,13 @@ class RatingDirective {
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus({ preventScroll: true });
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+        this.elementRef.nativeElement.focus(options);
     }
     /** The state icon `index` (1-based) renders for a given display value. */
     iconState(index) {
@@ -43976,6 +44317,9 @@ class RatingComponent {
         const rect = event.currentTarget.getBoundingClientRect();
         this.rating.commitPointer(event.clientX - rect.left < rect.width / 2 ? index - 0.5 : index);
     }
+    focus(options) {
+        this.rating.focus(options);
+    }
     applyGesture(gesture, press) {
         switch (gesture.type) {
             case 'start':
@@ -44132,6 +44476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class CheckboxGroupComponent {
     constructor() {
+        this.list = inject(SelectionListDirective);
         this.support = injectFormSupport();
         this.size = input(FORM_FIELD_SIZES.MD, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -44167,6 +44512,9 @@ class CheckboxGroupComponent {
             hintAnimatable: this.hintAnimatableRef,
         });
     }
+    focus(options) {
+        this.list.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-checkbox-group" }, providers: [{ provide: SELECTION_LIST_MULTIPLE, useValue: true }, provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-checkbox-group-support\">\n    <div class=\"et-checkbox-group-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-checkbox-group-support-content et-checkbox-group-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-checkbox-group-support-content et-checkbox-group-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-checkbox-group-support-content et-checkbox-group-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-checkbox-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-checkbox-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-checkbox-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-checkbox-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-checkbox-group-column-gap{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-checkbox-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-checkbox-group{display:flex;flex-direction:column;gap:var(--et-checkbox-group-gap);color:var(--et-surface-color-solid, currentColor)}et-checkbox-group>et-label,et-checkbox-group .et-checkbox-group-label{font-size:var(--et-checkbox-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-checkbox-group:where([data-size=sm]){--et-checkbox-group-label-font-size: 12px;--et-checkbox-group-gap: 8px}et-checkbox-group:where([data-size=sm]) et-checkbox-option{--et-checkbox-option-size: 16px;--et-checkbox-option-gap: 8px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-label{font-size:12px;line-height:16px}et-checkbox-group:where([data-size=sm]) .et-checkbox-option-check{inline-size:10px;block-size:8px}et-checkbox-group:where([data-size=lg]){--et-checkbox-group-label-font-size: 14px;--et-checkbox-group-gap: 12px}et-checkbox-group:where([data-size=lg]) et-checkbox-option{--et-checkbox-option-size: 24px;--et-checkbox-option-gap: 12px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-label{font-size:16px;line-height:24px}et-checkbox-group:where([data-size=lg]) .et-checkbox-option-check{inline-size:14px;block-size:12px}et-checkbox-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-checkbox-group[data-mixed] .et-checkbox-option-box{border-style:dashed;border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-support{overflow:clip;block-size:0}et-checkbox-group .et-checkbox-group-support-stack{position:relative;display:grid}et-checkbox-group .et-checkbox-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-checkbox-group .et-checkbox-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-checkbox-group .et-checkbox-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-checkbox-group-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint{padding-block-start:4px;font-size:var(--et-checkbox-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-group .et-checkbox-group-hint:empty{display:none}et-checkbox-group[data-can-animate] .et-checkbox-group-support{transition:block-size var(--et-checkbox-group-support-duration) ease}et-checkbox-group[data-can-animate] .et-checkbox-group-support-content{transition:opacity var(--et-checkbox-group-support-duration) ease,transform var(--et-checkbox-group-support-duration) ease}@starting-style{et-checkbox-group[data-can-animate] .et-checkbox-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-checkbox-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-checkbox-group{--et-checkbox-group-support-duration: 1ms;--et-checkbox-group-support-offset: 0px}}et-checkbox-group:where([data-orientation=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--et-checkbox-group-column-gap)}et-checkbox-group:where([data-orientation=horizontal])>et-label,et-checkbox-group:where([data-orientation=horizontal])>.et-checkbox-group-label,et-checkbox-group:where([data-orientation=horizontal])>.et-checkbox-group-support{flex-basis:100%}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -44255,6 +44603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class RadioGroupComponent {
     constructor() {
+        this.list = inject(SelectionListDirective);
         this.support = injectFormSupport();
         this.size = input(FORM_FIELD_SIZES.MD, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -44290,6 +44639,9 @@ class RadioGroupComponent {
             hintAnimatable: this.hintAnimatableRef,
         });
     }
+    focus(options) {
+        this.list.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RadioGroupComponent, isStandalone: true, selector: "et-radio-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null" }, classAttribute: "et-radio-group" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SelectionListDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-radio-group-support\">\n    <div class=\"et-radio-group-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-radio-group-support-content et-radio-group-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-radio-group-support-content et-radio-group-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-radio-group-support-content et-radio-group-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-radio-group-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-radio-group-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-radio-group-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-radio-group-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-radio-group-column-gap{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-radio-group-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}et-radio-group{display:flex;flex-direction:column;gap:var(--et-radio-group-gap);color:var(--et-surface-color-solid, currentColor)}et-radio-group>et-label,et-radio-group .et-radio-group-label{font-size:var(--et-radio-group-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-radio-group:where([data-size=sm]){--et-radio-group-label-font-size: 12px;--et-radio-group-gap: 8px}et-radio-group:where([data-size=sm]) et-radio{--et-radio-size: 16px;--et-radio-dot-size: 8px;--et-radio-gap: 8px}et-radio-group:where([data-size=sm]) .et-radio-label{font-size:12px;line-height:16px}et-radio-group:where([data-size=lg]){--et-radio-group-label-font-size: 14px;--et-radio-group-gap: 12px}et-radio-group:where([data-size=lg]) et-radio{--et-radio-size: 24px;--et-radio-dot-size: 12px;--et-radio-gap: 12px}et-radio-group:where([data-size=lg]) .et-radio-label{font-size:16px;line-height:24px}et-radio-group[data-error]{--_et-control-border: var(--et-theme-color-primary-solid)}et-radio-group[data-mixed] .et-radio-circle{border-style:dashed;border-color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-support{overflow:clip;block-size:0}et-radio-group .et-radio-group-support-stack{position:relative;display:grid}et-radio-group .et-radio-group-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-radio-group .et-radio-group-support-content[data-active]{opacity:1;transform:translateY(0)}et-radio-group .et-radio-group-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-radio-group-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-radio-group .et-radio-group-hint{padding-block-start:4px;font-size:var(--et-radio-group-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-radio-group .et-radio-group-hint:empty{display:none}et-radio-group[data-can-animate] .et-radio-group-support{transition:block-size var(--et-radio-group-support-duration) ease}et-radio-group[data-can-animate] .et-radio-group-support-content{transition:opacity var(--et-radio-group-support-duration) ease,transform var(--et-radio-group-support-duration) ease}@starting-style{et-radio-group[data-can-animate] .et-radio-group-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-radio-group-support-offset) * -1))}}@media(prefers-reduced-motion:reduce){et-radio-group{--et-radio-group-support-duration: 1ms;--et-radio-group-support-offset: 0px}}et-radio-group:where([data-orientation=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--et-radio-group-column-gap)}et-radio-group:where([data-orientation=horizontal])>et-label,et-radio-group:where([data-orientation=horizontal])>.et-radio-group-label,et-radio-group:where([data-orientation=horizontal])>.et-radio-group-support{flex-basis:100%}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -44676,10 +45028,13 @@ class RangeSliderDirective {
         }
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.thumbs()[0]?.focus();
+        this.thumbs()[0]?.focus(options);
     }
     thumbAriaBounds(index) {
         // parked thumbs carry no sibling constraint - while mixed, both announce the full track
@@ -44839,8 +45194,8 @@ class SliderThumbDirective {
             });
         }
     }
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     handleBlur() {
         this.focused.set(false);
@@ -45138,10 +45493,13 @@ class SliderDirective {
         }
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.thumbs()[0]?.focus();
+        this.thumbs()[0]?.focus(options);
     }
     thumbAriaBounds() {
         return { min: this.effectiveMin(), max: this.effectiveMax() };
@@ -45270,6 +45628,9 @@ class RangeSliderComponent {
     thumbLabelContext(index) {
         return { $implicit: this.slider.thumbValues()[index] ?? 0, index };
     }
+    focus(options) {
+        this.slider.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RangeSliderComponent, isStandalone: true, selector: "et-range-slider", inputs: { startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.data-disabled": "slider.disabled() || null", "attr.data-readonly": "slider.readonly() || null", "attr.data-dragging": "slider.draggingThumbIndex() !== null || null", "attr.data-mark-labels": "hasMarkLabels() || null" }, classAttribute: "et-range-slider" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: RangeSliderDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "minValue", "minValue", "maxValue", "maxValue", "step", "step", "minDistance", "minDistance", "orientation", "orientation", "marks", "marks", "snapToMarks", "snapToMarks"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n<div class=\"et-range-slider-interaction\" etSliderTrack>\n  <div class=\"et-range-slider-rail\" aria-hidden=\"true\"></div>\n  <div\n    [style.--_et-slider-fill-start]=\"slider.thumbPercents()[0] ?? 0\"\n    [style.--_et-slider-fill-end]=\"slider.thumbPercents()[1] ?? 0\"\n    class=\"et-range-slider-fill\"\n    aria-hidden=\"true\"\n  ></div>\n\n  @if (slider.markStops().length) {\n    <!-- the accessible values live on the thumbs \u2014 tick labels are decoration -->\n    <div class=\"et-range-slider-marks\" aria-hidden=\"true\">\n      @for (mark of slider.markStops(); track mark.value) {\n        <span\n          [attr.data-active]=\"mark.active || null\"\n          [attr.data-et-slider-mark-value]=\"mark.value\"\n          [style.--_et-slider-mark-position]=\"mark.percent\"\n          class=\"et-range-slider-mark\"\n        >\n          @if (mark.label) {\n            <span class=\"et-range-slider-mark-label\">{{ mark.label }}</span>\n          }\n        </span>\n      }\n    </div>\n  }\n\n  <div\n    #startThumb=\"etSliderThumb\"\n    [label]=\"resolvedStartLabel()\"\n    [style.--_et-slider-thumb-position]=\"startThumb.percent()\"\n    class=\"et-range-slider-thumb\"\n    etSliderThumb\n  >\n    @if (slider.registeredThumbLabelTemplate(); as labelTemplate) {\n      <div class=\"et-range-slider-thumb-value\" aria-hidden=\"true\">\n        <ng-template [ngTemplateOutlet]=\"labelTemplate.templateRef\" [ngTemplateOutletContext]=\"thumbLabelContext(0)\" />\n      </div>\n    }\n  </div>\n\n  <div\n    #endThumb=\"etSliderThumb\"\n    [label]=\"resolvedEndLabel()\"\n    [style.--_et-slider-thumb-position]=\"endThumb.percent()\"\n    class=\"et-range-slider-thumb\"\n    etSliderThumb\n  >\n    @if (slider.registeredThumbLabelTemplate(); as labelTemplate) {\n      <div class=\"et-range-slider-thumb-value\" aria-hidden=\"true\">\n        <ng-template [ngTemplateOutlet]=\"labelTemplate.templateRef\" [ngTemplateOutletContext]=\"thumbLabelContext(1)\" />\n      </div>\n    }\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-range-slider-support\">\n    <div class=\"et-range-slider-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-range-slider-support-content et-range-slider-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-range-slider-support-content et-range-slider-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-range-slider-support-content et-range-slider-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-slider-track-size{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-slider-vertical-size{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-slider-mark-size{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-mark-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-slider-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-slider-thumb-value-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-slider-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-range-slider{display:flex;flex-direction:column;gap:2px;color:var(--et-surface-color-solid, currentColor)}et-range-slider>et-label{font-size:var(--et-slider-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-range-slider .et-range-slider-interaction{position:relative;display:flex;align-items:center;block-size:max(28px,var(--et-slider-thumb-size));margin-inline:calc(var(--et-slider-thumb-size) / 2);cursor:pointer}et-range-slider .et-range-slider-rail{inline-size:100%;block-size:var(--et-slider-track-size);border-radius:999px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 32%,transparent)}et-range-slider .et-range-slider-fill{position:absolute;inset-block-start:50%;translate:0 -50%;inset-inline-start:calc(var(--_et-slider-fill-start, 0) * 1%);inline-size:calc((var(--_et-slider-fill-end, 0) - var(--_et-slider-fill-start, 0)) * 1%);block-size:var(--et-slider-track-size);border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);pointer-events:none}et-range-slider .et-range-slider-thumb{position:absolute;inset-block-start:50%;translate:0 -50%;inset-inline-start:calc(var(--_et-slider-thumb-position, 0) * 1% - var(--et-slider-thumb-size) / 2);inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);border-radius:50%;background:var(--et-theme-color-primary-solid, currentColor);box-shadow:0 1px 4px #00000040;outline:none}et-range-slider .et-range-slider-thumb:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}et-range-slider .et-range-slider-thumb[data-dragging]{z-index:1}et-range-slider .et-range-slider-marks{position:absolute;inset:0}et-range-slider .et-range-slider-mark{position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);translate:0 -50%;inline-size:var(--et-slider-mark-size);block-size:var(--et-slider-mark-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-color-muted-solid, currentColor) 55%,transparent)}et-range-slider .et-range-slider-mark:where([data-active]){background:color-mix(in srgb,var(--et-theme-color-on-primary, currentColor) 70%,transparent)}et-range-slider .et-range-slider-mark-label{position:absolute;left:50%;inset-block-start:calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);translate:-50% 0;inline-size:max-content;font-size:var(--et-slider-mark-label-font-size);line-height:1.2;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-range-slider:where([data-mark-labels]) .et-range-slider-interaction{margin-block-end:calc(var(--et-slider-mark-label-font-size) * 1.2 + var(--et-slider-thumb-size) / 2)}et-range-slider .et-range-slider-thumb-value{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;inline-size:max-content;padding:2px 8px;border-radius:6px;background:var(--et-surface-background-solid, currentColor);border:1px solid var(--et-surface-border-solid, transparent);font-size:var(--et-slider-thumb-value-font-size);line-height:1.4;color:var(--et-surface-color-solid, currentColor);pointer-events:none;-webkit-user-select:none;user-select:none}et-range-slider[data-mixed] .et-range-slider-rail{background:repeating-linear-gradient(to right,var(--et-theme-color-primary-solid, currentColor) 0 6px,transparent 6px 11px)}et-range-slider[data-mixed] .et-range-slider-thumb{box-shadow:none}et-range-slider[data-mixed] .et-range-slider-thumb-value{display:none}:is(et-range-slider[data-disabled],et-range-slider[data-readonly]) .et-range-slider-interaction{cursor:default}et-range-slider[data-disabled]{opacity:.4}et-range-slider .et-range-slider-support{overflow:clip;block-size:0}et-range-slider .et-range-slider-support-stack{position:relative;display:grid}et-range-slider .et-range-slider-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-range-slider .et-range-slider-support-content[data-active]{opacity:1;transform:translateY(0)}et-range-slider .et-range-slider-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-slider-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-range-slider .et-range-slider-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-slider-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-range-slider .et-range-slider-hint{padding-block-start:4px;font-size:var(--et-slider-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-range-slider .et-range-slider-hint:empty{display:none}et-range-slider[data-can-animate] .et-range-slider-support{transition:block-size var(--et-slider-support-duration) ease}et-range-slider[data-can-animate] .et-range-slider-support-content{transition:opacity var(--et-slider-support-duration) ease,transform var(--et-slider-support-duration) ease}@starting-style{et-range-slider[data-can-animate] .et-range-slider-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-slider-support-offset) * -1))}}et-range-slider[data-can-animate]:not([data-dragging]) .et-range-slider-thumb{transition:inset-inline-start .12s ease}et-range-slider[data-can-animate]:not([data-dragging]) .et-range-slider-fill{transition:inset-inline-start .12s ease,inline-size .12s ease}et-range-slider:where([data-orientation=vertical]) .et-range-slider-interaction{flex-direction:column;align-items:center;inline-size:max(28px,var(--et-slider-thumb-size));block-size:var(--et-slider-vertical-size);margin-inline:0;margin-block:calc(var(--et-slider-thumb-size) / 2)}et-range-slider:where([data-orientation=vertical]) .et-range-slider-rail{inline-size:var(--et-slider-track-size);block-size:100%}et-range-slider:where([data-orientation=vertical]) .et-range-slider-fill{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-fill-start, 0) * 1%);translate:-50% 0;inline-size:var(--et-slider-track-size);block-size:calc((var(--_et-slider-fill-end, 0) - var(--_et-slider-fill-start, 0)) * 1%)}et-range-slider:where([data-orientation=vertical]) .et-range-slider-thumb{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-thumb-position, 0) * 1% - var(--et-slider-thumb-size) / 2);translate:-50% 0}et-range-slider:where([data-orientation=vertical]) .et-range-slider-thumb-value{left:auto;bottom:auto;inset-block-start:50%;inset-inline-start:calc(100% + 8px);translate:0 -50%}et-range-slider:where([data-orientation=vertical]) .et-range-slider-mark{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);translate:-50% 0}et-range-slider:where([data-orientation=vertical]) .et-range-slider-mark-label{left:auto;inset-block-start:50%;inset-inline-end:calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);translate:0 -50%}et-range-slider:where([data-orientation=vertical])[data-mixed] .et-range-slider-rail{background:repeating-linear-gradient(to top,var(--et-theme-color-primary-solid, currentColor) 0 6px,transparent 6px 11px)}et-range-slider:where([data-orientation=vertical])[data-can-animate]:not([data-dragging]) .et-range-slider-thumb{transition:bottom .12s ease}et-range-slider:where([data-orientation=vertical])[data-can-animate]:not([data-dragging]) .et-range-slider-fill{transition:bottom .12s ease,block-size .12s ease}@media(prefers-reduced-motion:reduce){et-range-slider{--et-slider-support-duration: 1ms;--et-slider-support-offset: 0px}et-range-slider .et-range-slider-thumb,et-range-slider .et-range-slider-fill{transition:none}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SliderThumbDirective, selector: "[etSliderThumb]", inputs: ["label"], exportAs: ["etSliderThumb"] }, { kind: "directive", type: SliderTrackDirective, selector: "[etSliderTrack]", exportAs: ["etSliderTrack"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -45353,6 +45714,9 @@ class SliderComponent {
     thumbLabelContext(index) {
         return { $implicit: this.slider.thumbValues()[index] ?? 0, index };
     }
+    focus(options) {
+        this.slider.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SliderComponent, isStandalone: true, selector: "et-slider", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.data-disabled": "slider.disabled() || null", "attr.data-readonly": "slider.readonly() || null", "attr.data-dragging": "slider.draggingThumbIndex() !== null || null", "attr.data-mark-labels": "hasMarkLabels() || null" }, classAttribute: "et-slider" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContentRef", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatableRef", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: SliderDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "min", "min", "max", "max", "step", "step", "orientation", "orientation", "marks", "marks", "snapToMarks", "snapToMarks"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n<div class=\"et-slider-interaction\" etSliderTrack>\n  <div class=\"et-slider-rail\" aria-hidden=\"true\"></div>\n  <div [style.--_et-slider-fill-end]=\"slider.thumbPercents()[0] ?? 0\" class=\"et-slider-fill\" aria-hidden=\"true\"></div>\n\n  @if (slider.markStops().length) {\n    <!-- the accessible value lives on the thumb \u2014 tick labels are decoration -->\n    <div class=\"et-slider-marks\" aria-hidden=\"true\">\n      @for (mark of slider.markStops(); track mark.value) {\n        <span\n          [attr.data-active]=\"mark.active || null\"\n          [attr.data-et-slider-mark-value]=\"mark.value\"\n          [style.--_et-slider-mark-position]=\"mark.percent\"\n          class=\"et-slider-mark\"\n        >\n          @if (mark.label) {\n            <span class=\"et-slider-mark-label\">{{ mark.label }}</span>\n          }\n        </span>\n      }\n    </div>\n  }\n\n  <div\n    #thumb=\"etSliderThumb\"\n    [style.--_et-slider-thumb-position]=\"thumb.percent()\"\n    class=\"et-slider-thumb\"\n    etSliderThumb\n  >\n    @if (slider.registeredThumbLabelTemplate(); as labelTemplate) {\n      <div class=\"et-slider-thumb-value\" aria-hidden=\"true\">\n        <ng-template [ngTemplateOutlet]=\"labelTemplate.templateRef\" [ngTemplateOutletContext]=\"thumbLabelContext(0)\" />\n      </div>\n    }\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-slider-support\">\n    <div class=\"et-slider-support-stack\">\n      @if (support.shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.errorActive() || null\"\n          [etProvideColor]=\"support.errorColorTheme\"\n          class=\"et-slider-support-content et-slider-errors\"\n          etAnimatable\n        >\n          @for (error of support.visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderWarning()) {\n        <div\n          #warningContent\n          #warningAnimatable=\"etAnimatable\"\n          [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n          [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n          [attr.data-active]=\"support.warningActive() || null\"\n          [etProvideColor]=\"support.warningColorTheme()\"\n          class=\"et-slider-support-content et-slider-warnings\"\n          etAnimatable\n        >\n          @for (warning of support.visibleWarnings(); track $index) {\n            <et-form-warning [warning]=\"warning\" />\n          }\n        </div>\n      }\n\n      @if (support.shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n          [attr.data-active]=\"support.hintActive() || null\"\n          class=\"et-slider-support-content et-slider-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-slider-track-size{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-slider-vertical-size{syntax: \"<length>\"; inherits: true; initial-value: 160px;}@property --et-slider-mark-size{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-mark-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-slider-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-slider-thumb-value-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-slider-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-slider-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-slider-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-slider{display:flex;flex-direction:column;gap:2px;color:var(--et-surface-color-solid, currentColor)}et-slider>et-label{font-size:var(--et-slider-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-slider .et-slider-interaction{position:relative;display:flex;align-items:center;block-size:max(44px,var(--et-slider-thumb-size));margin-inline:calc(var(--et-slider-thumb-size) / 2);cursor:pointer}et-slider .et-slider-rail{inline-size:100%;block-size:var(--et-slider-track-size);border-radius:999px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 32%,transparent)}et-slider .et-slider-fill{position:absolute;inset-block-start:50%;translate:0 -50%;inset-inline-start:calc(var(--_et-slider-fill-start, 0) * 1%);inline-size:calc((var(--_et-slider-fill-end, 0) - var(--_et-slider-fill-start, 0)) * 1%);block-size:var(--et-slider-track-size);border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);pointer-events:none}et-slider .et-slider-thumb{position:absolute;inset-block-start:50%;translate:0 -50%;inset-inline-start:calc(var(--_et-slider-thumb-position, 0) * 1% - var(--et-slider-thumb-size) / 2);inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);border-radius:50%;background:var(--et-theme-color-primary-solid, currentColor);box-shadow:0 1px 4px #00000040;outline:none}et-slider .et-slider-thumb:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}et-slider .et-slider-marks{position:absolute;inset:0}et-slider .et-slider-mark{position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);translate:0 -50%;inline-size:var(--et-slider-mark-size);block-size:var(--et-slider-mark-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-color-muted-solid, currentColor) 55%,transparent)}et-slider .et-slider-mark:where([data-active]){background:color-mix(in srgb,var(--et-theme-color-on-primary, currentColor) 70%,transparent)}et-slider .et-slider-mark-label{position:absolute;left:50%;inset-block-start:calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);translate:-50% 0;inline-size:max-content;font-size:var(--et-slider-mark-label-font-size);line-height:1.2;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-slider:where([data-mark-labels]) .et-slider-interaction{margin-block-end:calc(var(--et-slider-mark-label-font-size) * 1.2 + var(--et-slider-thumb-size) / 2)}et-slider .et-slider-thumb-value{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;inline-size:max-content;padding:2px 8px;border-radius:6px;background:var(--et-surface-background-solid, currentColor);border:1px solid var(--et-surface-border-solid, transparent);font-size:var(--et-slider-thumb-value-font-size);line-height:1.4;color:var(--et-surface-color-solid, currentColor);pointer-events:none;-webkit-user-select:none;user-select:none}et-slider[data-mixed] .et-slider-rail{background:repeating-linear-gradient(to right,var(--et-theme-color-primary-solid, currentColor) 0 6px,transparent 6px 11px)}et-slider[data-mixed] .et-slider-thumb{box-shadow:none}et-slider[data-mixed] .et-slider-thumb-value{display:none}:is(et-slider[data-disabled],et-slider[data-readonly]) .et-slider-interaction{cursor:default}et-slider[data-disabled]{opacity:.4}et-slider .et-slider-support{overflow:clip;block-size:0}et-slider .et-slider-support-stack{position:relative;display:grid}et-slider .et-slider-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-slider .et-slider-support-content[data-active]{opacity:1;transform:translateY(0)}et-slider .et-slider-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-slider-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-slider .et-slider-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-slider-warning-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-slider .et-slider-hint{padding-block-start:4px;font-size:var(--et-slider-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-slider .et-slider-hint:empty{display:none}et-slider[data-can-animate] .et-slider-support{transition:block-size var(--et-slider-support-duration) ease}et-slider[data-can-animate] .et-slider-support-content{transition:opacity var(--et-slider-support-duration) ease,transform var(--et-slider-support-duration) ease}@starting-style{et-slider[data-can-animate] .et-slider-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-slider-support-offset) * -1))}}et-slider[data-can-animate]:not([data-dragging]) .et-slider-thumb{transition:inset-inline-start .12s ease}et-slider[data-can-animate]:not([data-dragging]) .et-slider-fill{transition:inset-inline-start .12s ease,inline-size .12s ease}et-slider:where([data-orientation=vertical]) .et-slider-interaction{flex-direction:column;align-items:center;inline-size:max(44px,var(--et-slider-thumb-size));block-size:var(--et-slider-vertical-size);margin-inline:0;margin-block:calc(var(--et-slider-thumb-size) / 2)}et-slider:where([data-orientation=vertical]) .et-slider-rail{inline-size:var(--et-slider-track-size);block-size:100%}et-slider:where([data-orientation=vertical]) .et-slider-fill{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-fill-start, 0) * 1%);translate:-50% 0;inline-size:var(--et-slider-track-size);block-size:calc((var(--_et-slider-fill-end, 0) - var(--_et-slider-fill-start, 0)) * 1%)}et-slider:where([data-orientation=vertical]) .et-slider-thumb{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-thumb-position, 0) * 1% - var(--et-slider-thumb-size) / 2);translate:-50% 0}et-slider:where([data-orientation=vertical]) .et-slider-thumb-value{left:auto;bottom:auto;inset-block-start:50%;inset-inline-start:calc(100% + 8px);translate:0 -50%}et-slider:where([data-orientation=vertical]) .et-slider-mark{inset-block-start:auto;inset-inline:auto;left:50%;bottom:calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);translate:-50% 0}et-slider:where([data-orientation=vertical]) .et-slider-mark-label{left:auto;inset-block-start:50%;inset-inline-end:calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);translate:0 -50%}et-slider:where([data-orientation=vertical])[data-mixed] .et-slider-rail{background:repeating-linear-gradient(to top,var(--et-theme-color-primary-solid, currentColor) 0 6px,transparent 6px 11px)}et-slider:where([data-orientation=vertical])[data-can-animate]:not([data-dragging]) .et-slider-thumb{transition:bottom .12s ease}et-slider:where([data-orientation=vertical])[data-can-animate]:not([data-dragging]) .et-slider-fill{transition:bottom .12s ease,block-size .12s ease}@media(prefers-reduced-motion:reduce){et-slider{--et-slider-support-duration: 1ms;--et-slider-support-offset: 0px}et-slider .et-slider-thumb,et-slider .et-slider-fill{transition:none}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SliderThumbDirective, selector: "[etSliderThumb]", inputs: ["label"], exportAs: ["etSliderThumb"] }, { kind: "directive", type: SliderTrackDirective, selector: "[etSliderTrack]", exportAs: ["etSliderTrack"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -45465,7 +45829,12 @@ class SwitchDirective {
             return;
         // readonly stays focusable (view-only), it just cannot toggle
         this.toggle();
-        this.el.nativeElement.focus();
+        this.focus();
+    }
+    focus(options) {
+        if (this.disabled())
+            return;
+        this.el.nativeElement.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: SwitchDirective, isStandalone: true, selector: "[etSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { attributes: { "role": "switch" }, listeners: { "click": "toggle()", "keydown.space": "toggle(); $event.preventDefault()", "blur": "touched.set(true)" }, properties: { "attr.aria-checked": "checked()", "attr.data-indeterminate": "indeterminate() || null", "attr.aria-invalid": "shouldDisplayError() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-readonly": "readonly() || null", "attr.data-readonly": "readonly() || null", "attr.aria-required": "required() || null", "attr.aria-describedby": "describedBy() || null", "attr.aria-labelledby": "labelId() || null", "attr.tabindex": "disabled() ? -1 : 0" } }, ngImport: i0 }); }
@@ -45497,17 +45866,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class SwitchComponent {
     constructor() {
+        this.switchDir = inject(SwitchDirective);
         this.canAnimate = createCanAnimateSignal();
     }
+    focus(options) {
+        this.switchDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@layer components{@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[data-readonly]{cursor:default}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}@media(hover:hover){et-switch:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}:where(et-choice-field[data-variant=card]) et-switch:focus-visible .et-switch-track{outline:none}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}@media(hover:hover){et-switch:hover:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}}et-switch:active:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}@media(hover:hover){et-switch[aria-checked=true]:hover:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}}et-switch[aria-checked=true]:active:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-indeterminate] .et-switch-track{background-color:transparent}et-switch[data-indeterminate] .et-switch-track:before{content:\"\";position:absolute;inset:0;border-radius:inherit;border:1px dashed var(--et-theme-color-primary-solid, currentColor)}et-switch[data-indeterminate] .et-switch-thumb{left:calc((var(--et-switch-track-width) - (var(--et-switch-thumb-size) - 4px)) / 2);background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@layer components{@property --et-switch-track-width{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: true; initial-value: 22px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[data-readonly]{cursor:default}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}@media(hover:hover){et-switch:hover:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([data-readonly]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 30%,transparent)}}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]):not([aria-checked=true]):not([data-indeterminate]) .et-switch-track{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid) 40%,transparent)}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}:where(et-choice-field[data-variant=card]) et-switch:focus-visible .et-switch-track{outline:none}et-switch .et-switch-thumb{position:absolute;top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);left:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);width:calc(var(--et-switch-thumb-size) - 4px);height:calc(var(--et-switch-thumb-size) - 4px);border-radius:calc(var(--et-switch-thumb-size) / 2);background-color:var(--et-surface-color-muted-solid, currentColor)}@media(hover:hover){et-switch:hover:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{background-color:var(--et-surface-color-solid, currentColor)}}et-switch:active:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{width:var(--et-switch-thumb-size)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[aria-checked=true] .et-switch-thumb{top:calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);background-color:var(--et-theme-color-on-primary-solid, white)}@media(hover:hover){et-switch[aria-checked=true]:hover:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true]:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{background-color:var(--et-theme-color-on-primary-solid, white)}}et-switch[aria-checked=true]:active:not([aria-disabled=true]):not([data-readonly]) .et-switch-thumb{width:calc(var(--et-switch-thumb-size) + 3px);left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset))}et-switch[data-indeterminate] .et-switch-track{background-color:transparent}et-switch[data-indeterminate] .et-switch-track:before{content:\"\";position:absolute;inset:0;border-radius:inherit;border:1px dashed var(--et-theme-color-primary-solid, currentColor)}et-switch[data-indeterminate] .et-switch-thumb{left:calc((var(--et-switch-track-width) - (var(--et-switch-thumb-size) - 4px)) / 2);background-color:var(--et-theme-color-primary-solid, currentColor)}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:top var(--et-switch-transition-duration) ease,left var(--et-switch-transition-duration) ease,width var(--et-switch-transition-duration) ease,height var(--et-switch-transition-duration) ease,background-color var(--et-switch-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-switch{--et-switch-transition-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-switch', encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
                             directive: SwitchDirective,
-                            inputs: ['checked', 'indeterminate', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name'],
+                            inputs: ['checked', 'indeterminate', 'touched', 'disabled', 'readonly', 'invalid', 'errors', 'required', 'name'],
                             outputs: ['checkedChange', 'indeterminateChange', 'touchedChange'],
                         },
                         ColorInteractiveDirective,
@@ -45621,10 +45994,13 @@ class TagInputDirective {
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
     activate() {
+        this.focus();
+    }
+    focus(options) {
         if (this.disabled()) {
             return;
         }
-        this.registeredField()?.focus();
+        this.registeredField()?.focus(options);
     }
     /**
      * Normalizes and appends a tag. Returns whether it was added. While mixed, the first
@@ -45706,8 +46082,8 @@ class TagInputFieldDirective {
         }
     }
     /** @internal */
-    focus() {
-        this.elementRef.nativeElement.focus({ preventScroll: true });
+    focus(options) {
+        this.elementRef.nativeElement.focus(options ?? { preventScroll: true });
     }
     /** Commits the pending text as a tag (if any) and clears the field. */
     commitPending() {
@@ -45814,6 +46190,9 @@ class TagInputComponent {
     constructor() {
         this.tagInput = inject(TagInputDirective);
     }
+    focus(options) {
+        this.tagInput.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TagInputComponent, isStandalone: true, selector: "et-tag-input", host: { listeners: { "click": "tagInput.activate()" }, classAttribute: "et-tag-input" }, hostDirectives: [{ directive: TagInputDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "separators", "separators", "allowDuplicates", "allowDuplicates", "normalizeTag", "normalizeTag", "maxTags", "maxTags"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-tag-input-row\">\n  <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n       remove affordance. While mixed there are no effective tags \u2014 the hidden raw value\n       must not render as chips -->\n  @for (tag of tagInput.effectiveValues(); track $index) {\n    <et-chip\n      [disabled]=\"tagInput.disabled()\"\n      [removable]=\"!tagInput.readonly() && !tagInput.disabled()\"\n      (remove)=\"tagInput.removeAt($index)\"\n    >\n      {{ tag }}\n    </et-chip>\n  }\n\n  <input class=\"et-tag-input-field\" etTagInputField type=\"text\" />\n</div>\n", styles: ["@layer components{et-tag-input{display:block;flex:1;min-inline-size:0;color:inherit;cursor:text}et-tag-input[data-disabled]{cursor:not-allowed}et-tag-input .et-tag-input-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-inline-size:0}et-tag-input .et-tag-input-field{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor)}et-tag-input .et-tag-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-tag-input .et-tag-input-field:disabled{cursor:not-allowed}et-tag-input[data-mixed] .et-tag-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "directive", type: TagInputFieldDirective, selector: "input[etTagInputField]", exportAs: ["etTagInputField"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -46016,8 +46395,11 @@ class TextareaComponent {
     syncNativeValue(event) {
         this.textareaDir.syncFromNativeInput(event.target);
     }
+    focus(options) {
+        this.textareaDir.focus(options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: TextareaComponent, isStandalone: true, selector: "et-textarea", host: { listeners: { "click": "textareaDir.activate()" }, classAttribute: "et-textarea" }, viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], hostDirectives: [{ directive: TextareaDirective, inputs: ["placeholder", "placeholder", "autocomplete", "autocomplete", "rows", "rows", "autosize", "autosize", "minRows", "minRows", "maxRows", "maxRows", "resize", "resize", "value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<textarea\n  #nativeTextarea\n  [value]=\"textareaDir.displayValue()\"\n  [disabled]=\"textareaDir.disabled()\"\n  [readOnly]=\"textareaDir.readonly()\"\n  [required]=\"textareaDir.required()\"\n  [placeholder]=\"textareaDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"textareaDir.autocomplete() || null\"\n  [rows]=\"textareaDir.rows()\"\n  [attr.name]=\"textareaDir.name() || null\"\n  [attr.aria-invalid]=\"textareaDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"textareaDir.describedBy() || null\"\n  [attr.aria-label]=\"textareaDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"textareaDir.labelId() || null\"\n  [attr.data-resize]=\"textareaDir.effectiveResize()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"textareaDir.focused.set(true)\"\n  (blur)=\"textareaDir.focused.set(false); textareaDir.touched.set(true)\"\n  class=\"et-textarea-native\"\n></textarea>\n", styles: ["@layer components{et-textarea{display:block;flex:1;min-inline-size:0;color:inherit}et-textarea .et-textarea-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-textarea .et-textarea-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-textarea .et-textarea-native[data-resize=none]{resize:none}et-textarea .et-textarea-native[data-resize=vertical]{resize:vertical}et-textarea[data-mixed] .et-textarea-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: TextareaComponent, isStandalone: true, selector: "et-textarea", host: { listeners: { "click": "textareaDir.activate()" }, classAttribute: "et-textarea" }, viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], hostDirectives: [{ directive: TextareaDirective, inputs: ["placeholder", "placeholder", "autocomplete", "autocomplete", "rows", "rows", "autosize", "autosize", "minRows", "minRows", "maxRows", "maxRows", "resize", "resize", "value", "value", "mixed", "mixed", "touched", "touched", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<textarea\n  #nativeTextarea\n  [value]=\"textareaDir.displayValue()\"\n  [disabled]=\"textareaDir.disabled()\"\n  [readOnly]=\"textareaDir.readonly()\"\n  [required]=\"textareaDir.required()\"\n  [placeholder]=\"textareaDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"textareaDir.autocomplete() || null\"\n  [rows]=\"textareaDir.rows()\"\n  [attr.name]=\"textareaDir.name() || null\"\n  [attr.aria-invalid]=\"textareaDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"textareaDir.describedBy() || null\"\n  [attr.aria-label]=\"textareaDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"textareaDir.labelId() || null\"\n  [attr.data-resize]=\"textareaDir.effectiveResize()\"\n  (input)=\"syncNativeValue($event)\"\n  (focus)=\"textareaDir.focused.set(true)\"\n  (blur)=\"textareaDir.focused.set(false); textareaDir.touched.set(true)\"\n  class=\"et-textarea-native\"\n></textarea>\n", styles: ["@layer components{et-textarea{display:block;flex:1;min-inline-size:0;color:inherit}et-textarea .et-textarea-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0}et-textarea .et-textarea-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-textarea .et-textarea-native[data-resize=none]{resize:none}et-textarea .et-textarea-native[data-resize=vertical]{resize:vertical}et-textarea[data-mixed] .et-textarea-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -46034,6 +46416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                                 'resize',
                                 'value',
                                 'mixed',
+                                'touched',
                                 'mixedLabel',
                                 'disabled',
                                 'readonly',
@@ -63939,6 +64322,12 @@ class TabBarTriggerDirective {
         this.ID = `et-tab-trigger-${nextTriggerId++}`;
         this.justActivated = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "justActivated" }] : /* istanbul ignore next */ []));
+        /**
+         * @internal Set when something else owns the selection - a router link, where a click only asks to
+         * navigate and the selection has to wait until that navigation is actually committed.
+         */
+        this.deferSelection = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deferSelection" }] : /* istanbul ignore next */ []));
         this.isSelected = computed(() => {
             const tabBar = this.tabBar;
             if (!tabBar) {
@@ -63995,7 +64384,9 @@ class TabBarTriggerDirective {
     handleClick() {
         if (!this.disabled()) {
             const wasSelected = this.isSelected();
-            this.tabBar?.selectTrigger(this);
+            if (!this.deferSelection()) {
+                this.tabBar?.selectTrigger(this);
+            }
             if (!wasSelected) {
                 this.justActivated.set(true);
             }
@@ -64265,7 +64656,6 @@ class NavTabLinkDirective {
     constructor() {
         this.routerLinkActive = inject(RouterLinkActive, { self: true, optional: true });
         this.overlayRouterLink = inject(OVERLAY_ROUTER_LINK_TOKEN, { self: true, optional: true });
-        this.overlayRouter = inject(OVERLAY_ROUTER_TOKEN, { optional: true });
         this.navTabs = inject(NAV_TABS_TOKEN, { optional: true });
         this.tabBar = inject(TabBarDirective, { optional: true });
         this.destroyRef = inject(DestroyRef);
@@ -64275,18 +64665,15 @@ class NavTabLinkDirective {
         ...(ngDevMode ? [{ debugName: "routerLinkIsActive" }] : /* istanbul ignore next */ []));
         this.isActive = computed(() => this.overlayRouterLink?.isActive() ?? this.routerLinkIsActive(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        // The router owns the selection: a click only asks to navigate, so a guard that vetoes or stalls
+        // the navigation leaves the tab bar where it is.
+        this.trigger.deferSelection.set(true);
         this.routerLinkActive?.isActiveChange
             .pipe(takeUntilDestroyed(this.destroyRef), tap((active) => {
             this.routerLinkIsActive.set(active);
         }))
             .subscribe();
-        // A click selects the trigger optimistically, so the active link has to claim the selection back
-        // when the router refuses to move. Never while a navigation is in flight: the link being left is
-        // still the active one in there, so claiming it back then undoes the click.
         effect(() => {
-            if (this.overlayRouter?.navigationPending()) {
-                return;
-            }
             if (this.isActive() && this.tabBar?.activeTrigger() !== this.trigger) {
                 this.tabBar?.selectTrigger(this.trigger);
             }
@@ -65932,11 +66319,11 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.48';
+const COMPONENTS_VERSION = '1.0.0-next.50';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
+export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_IMPORTS, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, focusFirstInvalidField, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
 //# sourceMappingURL=ethlete-components.mjs.map