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

package/fesm2022/ethlete-components.mjs

@@ -1,7 +1,7 @@
 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, 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, 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 { 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';
@@ -11,6 +11,7 @@ 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 { enUS } from 'date-fns/locale/en-US';
 import { tap as tap$1 } from 'rxjs/operators';
 
 // codes 3600-3699
@@ -2108,7 +2109,7 @@ class ProgressBarComponent {
         <span class="et-progress-bar__bar-inner"></span>
       </div>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -2131,7 +2132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-valuenow]': 'indeterminate() ? null : clampedValue()',
                         '[attr.aria-valuemin]': 'indeterminate() ? null : 0',
                         '[attr.aria-valuemax]': 'indeterminate() ? null : 100',
-                    }, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"] }]
+                    }, styles: ["@layer components{@property --et-progress-bar-height{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-progress-bar-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 9999px;}@keyframes et-progress-bar-primary-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translate(83.67142%)}to{transform:translate(200.611057%)}}@keyframes et-progress-bar-primary-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes et-progress-bar-secondary-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translate(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translate(84.386165%)}to{transform:translate(160.277782%)}}@keyframes et-progress-bar-secondary-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}.et-progress-bar{--_et-progress-bar-track-color: var( --et-progress-bar-track-color, color-mix(in srgb, currentColor 12%, transparent) );--_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);--_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);display:block;width:100%}.et-progress-bar__track{position:relative;overflow-x:hidden;width:100%;height:var(--et-progress-bar-height);border-radius:var(--et-progress-bar-border-radius);background:var(--_et-progress-bar-track-color)}.et-progress-bar__bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .2s linear;height:var(--et-progress-bar-height)}.et-progress-bar--indeterminate .et-progress-bar__bar{transition:none}.et-progress-bar__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--_et-progress-bar-indicator-color);border-top-width:var(--et-progress-bar-height)}.et-progress-bar__bar--primary{transform:scaleX(0)}.et-progress-bar--indeterminate .et-progress-bar__bar--primary{left:-145.166611%;animation:et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--primary>.et-progress-bar__bar-inner{animation:et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear}.et-progress-bar__bar--secondary{display:none}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary{left:-54.888891%;display:block;animation:et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear}.et-progress-bar--indeterminate .et-progress-bar__bar--secondary>.et-progress-bar__bar-inner{animation:et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 const BASE_STROKE_WIDTH = 10;
@@ -9359,14 +9360,14 @@ class OverlayContainerComponent {
         return host;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-base: 20px;--_et-overlay-arrow-size: calc(var(--_et-overlay-arrow-base) / 1.4142136);--_et-overlay-arrow-overlap: calc(var(--_et-overlay-arrow-base) / 2);--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc(var(--_et-overlay-arrow-base) / 2 - var(--_et-overlay-arrow-pane-border-width, 0px));position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-base);block-size:var(--_et-overlay-arrow-base);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--_et-overlay-arrow-pane-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;margin:auto;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;overscroll-behavior:contain;padding-inline:var(--et-overlay-padding-inline);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content;padding-block:var(--et-overlay-body-padding-block)}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-base: 20px;--_et-overlay-arrow-size: calc(var(--_et-overlay-arrow-base) / 1.4142136);--_et-overlay-arrow-overlap: calc(var(--_et-overlay-arrow-base) / 2);--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc(var(--_et-overlay-arrow-base) / 2 - var(--_et-overlay-arrow-pane-border-width, 0px));position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-base);block-size:var(--_et-overlay-arrow-base);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--_et-overlay-arrow-pane-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;margin:auto;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;overscroll-behavior:contain;padding-inline:var(--et-overlay-padding-inline);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content;padding-block:var(--et-overlay-body-padding-block)}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-overlay-container', encapsulation: ViewEncapsulation.None, providers: [provideBoundaryElement()], hostDirectives: [AnimatedLifecycleDirective, ProvideColorDirective, ProvideSurfaceDirective], host: {
                         class: 'et-overlay',
                         '[class.et-with-default-animation]': '!overlayRef.config.customAnimated',
-                    }, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-base: 20px;--_et-overlay-arrow-size: calc(var(--_et-overlay-arrow-base) / 1.4142136);--_et-overlay-arrow-overlap: calc(var(--_et-overlay-arrow-base) / 2);--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc(var(--_et-overlay-arrow-base) / 2 - var(--_et-overlay-arrow-pane-border-width, 0px));position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-base);block-size:var(--_et-overlay-arrow-base);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--_et-overlay-arrow-pane-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;margin:auto;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;overscroll-behavior:contain;padding-inline:var(--et-overlay-padding-inline);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content;padding-block:var(--et-overlay-body-padding-block)}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
+                    }, template: "<div class=\"et-overlay-container-drag-handle\"></div>\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:nth-child(2){overflow:auto;border-radius:inherit}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:nth-child(2):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:nth-child(2){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay:has(>.et-overlay-arrow){overflow:visible}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-arrow{--_et-overlay-arrow-base: 20px;--_et-overlay-arrow-size: calc(var(--_et-overlay-arrow-base) / 1.4142136);--_et-overlay-arrow-overlap: calc(var(--_et-overlay-arrow-base) / 2);--_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);--_et-overlay-arrow-border-color: var( --et-overlay-arrow-border, var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / .1))) );--_et-overlay-arrow-clip: calc(var(--_et-overlay-arrow-base) / 2 - var(--_et-overlay-arrow-pane-border-width, 0px));position:absolute;z-index:1;inline-size:var(--_et-overlay-arrow-base);block-size:var(--_et-overlay-arrow-base);transform:var(--et-floating-arrow-translate, translate3d(0, 0, 0));visibility:hidden;background-color:var( --et-overlay-arrow-background, var(--_et-overlay-arrow-pane-background, var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)))) );pointer-events:none}.et-overlay-arrow:before{content:\"\";position:absolute;inset:0;margin:auto;inline-size:var(--_et-overlay-arrow-size);block-size:var(--_et-overlay-arrow-size);box-sizing:border-box;visibility:visible;border-radius:2px;border:0 solid var(--_et-overlay-arrow-border-color);background-color:inherit;box-shadow:var(--et-overlay-arrow-shadow, none);transform:rotate(45deg)}.et-force-invisible .et-overlay-arrow:before{visibility:hidden}[data-overlay-placement^=top]>.et-overlay-arrow{bottom:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(var(--_et-overlay-arrow-clip) -100% -100% -100%)}[data-overlay-placement^=top]>.et-overlay-arrow:before{border-right-width:var(--_et-overlay-arrow-border-width);border-bottom-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=right]>.et-overlay-arrow{left:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% var(--_et-overlay-arrow-clip) -100% -100%)}[data-overlay-placement^=right]>.et-overlay-arrow:before{border-bottom-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=bottom]>.et-overlay-arrow{top:calc(var(--_et-overlay-arrow-overlap) * -1);left:0;clip-path:inset(-100% -100% var(--_et-overlay-arrow-clip) -100%)}[data-overlay-placement^=bottom]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-left-width:var(--_et-overlay-arrow-border-width)}[data-overlay-placement^=left]>.et-overlay-arrow{right:calc(var(--_et-overlay-arrow-overlap) * -1);top:0;clip-path:inset(-100% -100% -100% var(--_et-overlay-arrow-clip))}[data-overlay-placement^=left]>.et-overlay-arrow:before{border-top-width:var(--_et-overlay-arrow-border-width);border-right-width:var(--_et-overlay-arrow-border-width)}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;overscroll-behavior:contain;padding-inline:var(--et-overlay-padding-inline);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:min-content;padding-block:var(--et-overlay-body-padding-block)}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], componentBindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentBindings", required: false }] }], renderArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderArrow", required: false }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 const isHtmlElement = (element) => element instanceof HTMLElement;
@@ -12405,8 +12406,14 @@ const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
     ...(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 */
@@ -12487,22 +12494,66 @@ const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
             type: isBack || r === '/' ? 'back' : isReplaceCurrent ? 'replace-current' : isAbsolute ? 'absolute' : 'forward',
         };
     };
-    const navigate = (r, navigateConfig) => {
-        const resolvedRoute = resolvePath(r);
-        const from = syncCurrentRoute();
+    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';
-        // Route hints only affect the played animation. The history bookkeeping below must stay
-        // tied to the actual navigation semantics, or `back()` would misbehave for hinted routes.
+        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 ?? 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();
@@ -12553,24 +12604,25 @@ const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
                 else if (r !== syncCurrentRoute()) {
                     const navStack = nativeBrowserBackStack();
                     const curr = syncCurrentRoute();
-                    if (!navStack.length) {
-                        // If the nav stack is empty the only way to navigate is back.
-                        navigate(r, { navigationDirection: 'backward' });
-                        nativeBrowserBackStack.set([curr]);
-                    }
-                    else {
-                        const lastItem = navStack[navStack.length - 1];
-                        if (r === lastItem) {
-                            // Going forward again.
-                            navigate(r, { navigationDirection: 'forward' });
-                            nativeBrowserBackStack.set(navStack.slice(0, -1));
-                        }
-                        else {
-                            // Going back.
-                            navigate(r, { navigationDirection: 'backward' });
-                            nativeBrowserBackStack.set([...navStack, curr]);
-                        }
-                    }
+                    // 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.
@@ -12594,9 +12646,11 @@ const OVERLAY_ROUTER_DEF = /* @__PURE__ */ defineProvider(() => {
         transitionType,
         navigationDirection,
         canGoBack,
+        navigationPending,
         routes,
         currentPage,
         navigate,
+        registerNavigationGuard,
         back,
         resolvePath,
         addRoute,
@@ -13141,13 +13195,11 @@ class OverlaySidebarComponent {
     @if (sidebar.renderSidebar()) {
       <ng-container *ngTemplateOutlet="sidebarContent()" />
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{.et-overlay-sidebar-host{display:none}.et-overlay-sidebar-host.et-overlay-sidebar--visible{display:flex;flex-direction:column;inline-size:var(--et-overlay-sidebar-inline-size, 240px);padding-block:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);border-inline-end:1px solid var(--et-overlay-body-divider-color);overflow-y:auto;overscroll-behavior:contain}}\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: OverlaySidebarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'et-overlay-sidebar',
-                    template: `
+            args: [{ selector: 'et-overlay-sidebar', template: `
     <ng-template #sidebarContentTpl>
       <ng-content />
     </ng-template>
@@ -13155,14 +13207,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     @if (sidebar.renderSidebar()) {
       <ng-container *ngTemplateOutlet="sidebarContent()" />
     }
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [NgTemplateOutlet],
-                    host: {
+  `, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
                         class: 'et-overlay-sidebar-host',
                         '[class.et-overlay-sidebar--visible]': 'sidebar.renderSidebar()',
-                    },
-                }]
+                    }, styles: ["@layer components{.et-overlay-sidebar-host{display:none}.et-overlay-sidebar-host.et-overlay-sidebar--visible{display:flex;flex-direction:column;inline-size:var(--et-overlay-sidebar-inline-size, 240px);padding-block:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);border-inline-end:1px solid var(--et-overlay-body-divider-color);overflow-y:auto;overscroll-behavior:contain}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pageDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageDividers", required: false }] }], sidebarContent: [{ type: i0.ViewChild, args: ['sidebarContentTpl', { isSignal: true }] }], sidebarHeaderContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OVERLAY_HEADER_TEMPLATE_TOKEN), { isSignal: true }] }] } });
 
 class ToggletipCloseDirective {
@@ -21858,7 +21906,7 @@ class CascaderPanelComponent {
     <div #panelBody class="et-cascader-panel-body">
       <ng-content />
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-cascader-column-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 220px;}@property --et-cascader-panel-max-block-size{syntax: \"<length-percentage>\"; inherits: false; initial-value: 320px;}@property --et-cascader-node-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--cascader[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--cascader[data-overlay-placement].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-cascader-panel{display:block;box-sizing:border-box;--_et-cascader-panel-max-block-size: min( var(--et-cascader-panel-max-block-size), var(--et-overlay-max-height, 100vh) );border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:14px;box-shadow:0 10px 24px #00000029;overflow:hidden}.et-cascader-panel.et-cascader-panel--resizing{overflow:clip}.et-cascader-panel:not([data-sheet])>.et-cascader-panel-body{inline-size:max-content}.et-cascader-panel .et-cascader-sheet-header{position:relative;display:flex;align-items:center;flex:none;box-sizing:border-box;block-size:var(--et-cascader-node-height);padding-block:4px;padding-inline:20px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-back{position:absolute;inset-block:0;inset-inline-start:20px;display:inline-flex;align-items:center;transition:opacity .18s ease,transform .18s ease}.et-cascader-panel .et-cascader-back.et-cascader-back--hidden{opacity:0;transform:translate(-6px);pointer-events:none}.et-cascader-panel .et-cascader-back-icon{rotate:-90deg}.et-cascader-panel .et-cascader-sheet-title-slot{position:relative;flex:1;min-inline-size:0;align-self:stretch;overflow:hidden;pointer-events:none}.et-cascader-panel .et-cascader-sheet-title-shift{position:absolute;inset:0;transform:translate(0);transition:transform .18s ease}.et-cascader-panel .et-cascader-sheet-header[data-back] .et-cascader-sheet-title-shift{transform:translate(var(--et-cascader-back-slot, 4em))}.et-cascader-panel .et-cascader-sheet-title{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-forward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-backward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-forward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-backward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--enter{animation:et-cascader-title-fade-in .18s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--leave{animation:et-cascader-title-fade-out .18s ease forwards}.et-cascader-panel .et-cascader-breadcrumbs{display:flex;align-items:center;gap:2px;box-sizing:border-box;inline-size:0;min-inline-size:100%;padding:6px;border-block-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));overflow:hidden}.et-cascader-panel .et-cascader-crumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--enter{animation:et-cascader-crumb-in .2s ease}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--leave{animation:et-cascader-crumb-out .16s ease forwards}.et-cascader-panel .et-cascader-breadcrumb{display:block;min-inline-size:0;padding:4px 8px;border:none;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--et-surface-color-muted-solid, currentColor);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;appearance:none;outline:none;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-cascader-panel .et-cascader-breadcrumb:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-cascader-panel .et-cascader-breadcrumb:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent);color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb[data-current]{color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb-chevron{flex:none;inline-size:10px;block-size:10px;color:var(--et-surface-color-subtle-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-columns{display:flex;max-block-size:var(--_et-cascader-panel-max-block-size)}.et-cascader-panel .et-cascader-columns:not([data-sheet]){display:block;inline-size:calc(var(--_et-cascader-visible-columns, 1) * var(--et-cascader-column-inline-size));overflow:clip}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column{box-sizing:border-box}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column--offstage{contain:size}.et-cascader-panel .et-cascader-columns[data-sheet]{display:block;flex:1;min-block-size:0;max-block-size:none;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column{inline-size:100%;block-size:100%;max-block-size:none;overflow:visible;border-inline-end:none}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:has(.et-cascader-state){display:flex;align-items:center;justify-content:center}.et-cascader-panel .et-cascader-columns-track{display:flex;max-block-size:inherit;transform:translate(calc(var(--_et-cascader-column-window-start, 0) * -1 * var(--et-cascader-column-inline-size)));transition:transform .24s ease}.et-cascader-panel .et-cascader-sheet-body{display:flex;flex-direction:column;block-size:min(60vh,480px)}.et-cascader-panel .et-cascader-search{padding:6px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-search input[etcascadersearch]{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-cascader-panel .et-cascader-search input[etcascadersearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-cascader-panel .et-cascader-search input[etcascadersearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-cascader-panel .et-cascader-results{display:block;box-sizing:border-box;inline-size:min(320px,calc(100vw - 24px));max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-sheet-body .et-cascader-results{flex:1;min-block-size:0;inline-size:100%;max-block-size:none}.et-cascader-panel .et-cascader-column{display:block;flex:none;inline-size:var(--et-cascader-column-inline-size);max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-column:not(:last-child){border-inline-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-in-forward .2s ease}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=backward]){animation:et-cascader-column-in-backward .2s ease}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-grow-in .18s ease}.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:var(--et-cascader-node-height);padding-inline:10px;border:none;border-radius:6px;background:transparent;font:inherit;text-align:start;color:inherit;cursor:pointer;appearance:none;outline:none;transition:background .12s ease}@media(hover:hover){:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):focus-visible,:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-focused]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-expanded]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-selected]{color:var(--et-theme-color-ink-solid, currentColor);font-weight:500}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-disabled]{cursor:default;opacity:.4}.et-cascader-panel .et-cascader-node-label,.et-cascader-panel .et-cascader-search-option-label{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.et-cascader-panel .et-cascader-search-option-ancestor{color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-check{position:relative;flex:none;inline-size:16px;block-size:16px;box-sizing:border-box;border:2px solid var(--et-surface-border-solid, rgb(255 255 255 / .3));border-radius:4px;transition:background .12s ease,border-color .12s ease}.et-cascader-panel .et-cascader-check:after{content:\"\";position:absolute;opacity:0}.et-cascader-panel [data-selected]>.et-cascader-check,.et-cascader-panel [data-indeterminate]>.et-cascader-check{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor)}.et-cascader-panel [data-selected]>.et-cascader-check:after{inset-inline-start:4px;inset-block-start:1px;inline-size:4px;block-size:8px;border:solid var(--et-theme-color-on-primary, rgb(0 0 0));border-width:0 2px 2px 0;rotate:45deg;opacity:1}.et-cascader-panel [data-indeterminate]>.et-cascader-check:after{inset-inline-start:2px;inset-block-start:5px;inline-size:8px;block-size:2px;background:var(--et-theme-color-on-primary, rgb(0 0 0));opacity:1}.et-cascader-panel .et-cascader-node-chevron{flex:none;inline-size:12px;block-size:12px;color:var(--et-surface-color-muted-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-state{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:var(--et-cascader-node-height);padding:12px 16px;text-align:center;color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-state.et-cascader-state--error{flex-direction:column;gap:8px;font-size:12px}.et-cascader-panel .et-cascader-state-error-message{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}@keyframes et-cascader-title-enter-forward{0%{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-enter-backward{0%{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-forward{to{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-backward{to{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-fade-in{0%{opacity:0}}@keyframes et-cascader-title-fade-out{to{opacity:0}}@keyframes et-cascader-column-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-cascader-column-in-backward{0%{opacity:0;transform:translate(-14px)}}@keyframes et-cascader-column-grow-in{0%{opacity:0;transform:translate(-10px)}}@keyframes et-cascader-crumb-in{0%{opacity:0;transform:translate(8px)}}@keyframes et-cascader-crumb-out{to{opacity:0;transform:translate(8px)}}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-column,.et-cascader-panel .et-cascader-sheet-title,.et-cascader-panel .et-cascader-crumb{animation:none}.et-cascader-panel .et-cascader-back,.et-cascader-panel .et-cascader-sheet-title-shift,.et-cascader-panel .et-cascader-columns-track{transition:none}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-cascader-column-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 220px;}@property --et-cascader-panel-max-block-size{syntax: \"<length-percentage>\"; inherits: false; initial-value: 320px;}@property --et-cascader-node-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--cascader[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--cascader[data-overlay-placement].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-cascader-panel{display:block;box-sizing:border-box;--_et-cascader-panel-max-block-size: min( var(--et-cascader-panel-max-block-size), var(--et-overlay-max-height, 100vh) );border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:14px;box-shadow:0 10px 24px #00000029;overflow:hidden}.et-cascader-panel.et-cascader-panel--resizing{overflow:clip}.et-cascader-panel:not([data-sheet])>.et-cascader-panel-body{inline-size:max-content}.et-cascader-panel .et-cascader-sheet-header{position:relative;display:flex;align-items:center;flex:none;box-sizing:border-box;block-size:var(--et-cascader-node-height);padding-block:4px;padding-inline:20px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-back{position:absolute;inset-block:0;inset-inline-start:20px;display:inline-flex;align-items:center;transition:opacity .18s ease,transform .18s ease}.et-cascader-panel .et-cascader-back.et-cascader-back--hidden{opacity:0;transform:translate(-6px);pointer-events:none}.et-cascader-panel .et-cascader-back-icon{rotate:-90deg}.et-cascader-panel .et-cascader-sheet-title-slot{position:relative;flex:1;min-inline-size:0;align-self:stretch;overflow:hidden;pointer-events:none}.et-cascader-panel .et-cascader-sheet-title-shift{position:absolute;inset:0;transform:translate(0);transition:transform .18s ease}.et-cascader-panel .et-cascader-sheet-header[data-back] .et-cascader-sheet-title-shift{transform:translate(var(--et-cascader-back-slot, 4em))}.et-cascader-panel .et-cascader-sheet-title{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-forward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-backward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-forward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-backward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--enter{animation:et-cascader-title-fade-in .18s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--leave{animation:et-cascader-title-fade-out .18s ease forwards}.et-cascader-panel .et-cascader-breadcrumbs{display:flex;align-items:center;gap:2px;box-sizing:border-box;inline-size:0;min-inline-size:100%;padding:6px;border-block-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));overflow:hidden}.et-cascader-panel .et-cascader-crumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--enter{animation:et-cascader-crumb-in .2s ease}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--leave{animation:et-cascader-crumb-out .16s ease forwards}.et-cascader-panel .et-cascader-breadcrumb{display:block;min-inline-size:0;padding:4px 8px;border:none;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--et-surface-color-muted-solid, currentColor);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;appearance:none;outline:none;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-cascader-panel .et-cascader-breadcrumb:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-cascader-panel .et-cascader-breadcrumb:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent);color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb[data-current]{color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb-chevron{flex:none;inline-size:10px;block-size:10px;color:var(--et-surface-color-subtle-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-columns{display:flex;max-block-size:var(--_et-cascader-panel-max-block-size)}.et-cascader-panel .et-cascader-columns:not([data-sheet]){display:block;inline-size:calc(var(--_et-cascader-visible-columns, 1) * var(--et-cascader-column-inline-size));overflow:clip}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column{box-sizing:border-box}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column--offstage{contain:size}.et-cascader-panel .et-cascader-columns[data-sheet]{display:block;flex:1;min-block-size:0;max-block-size:none;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column{inline-size:100%;block-size:100%;max-block-size:none;overflow:visible;border-inline-end:none}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:has(.et-cascader-state){display:flex;align-items:center;justify-content:center}.et-cascader-panel .et-cascader-columns-track{display:flex;max-block-size:inherit;transform:translate(calc(var(--_et-cascader-column-window-start, 0) * -1 * var(--et-cascader-column-inline-size)));transition:transform .24s ease}.et-cascader-panel .et-cascader-sheet-body{display:flex;flex-direction:column;block-size:min(60vh,480px)}.et-cascader-panel .et-cascader-search{padding:6px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-search input[etcascadersearch]{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-cascader-panel .et-cascader-search input[etcascadersearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-cascader-panel .et-cascader-search input[etcascadersearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-cascader-panel .et-cascader-results{display:block;box-sizing:border-box;inline-size:min(320px,calc(100vw - 24px));max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-sheet-body .et-cascader-results{flex:1;min-block-size:0;inline-size:100%;max-block-size:none}.et-cascader-panel .et-cascader-column{display:block;flex:none;inline-size:var(--et-cascader-column-inline-size);max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-column:not(:last-child){border-inline-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-in-forward .2s ease}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=backward]){animation:et-cascader-column-in-backward .2s ease}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-grow-in .18s ease}.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:var(--et-cascader-node-height);padding-inline:10px;border:none;border-radius:6px;background:transparent;font:inherit;text-align:start;color:inherit;cursor:pointer;appearance:none;outline:none;transition:background .12s ease}@media(hover:hover){:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):focus-visible,:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-focused]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-expanded]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-selected]{color:var(--et-theme-color-ink-solid, currentColor);font-weight:500}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-disabled]{cursor:default;opacity:.4}.et-cascader-panel .et-cascader-node-label,.et-cascader-panel .et-cascader-search-option-label{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.et-cascader-panel .et-cascader-search-option-ancestor{color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-check{position:relative;flex:none;inline-size:16px;block-size:16px;box-sizing:border-box;border:2px solid var(--et-surface-border-solid, rgb(255 255 255 / .3));border-radius:4px;transition:background .12s ease,border-color .12s ease}.et-cascader-panel .et-cascader-check:after{content:\"\";position:absolute;opacity:0}.et-cascader-panel [data-selected]>.et-cascader-check,.et-cascader-panel [data-indeterminate]>.et-cascader-check{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor)}.et-cascader-panel [data-selected]>.et-cascader-check:after{inset-inline-start:4px;inset-block-start:1px;inline-size:4px;block-size:8px;border:solid var(--et-theme-color-on-primary, rgb(0 0 0));border-width:0 2px 2px 0;rotate:45deg;opacity:1}.et-cascader-panel [data-indeterminate]>.et-cascader-check:after{inset-inline-start:2px;inset-block-start:5px;inline-size:8px;block-size:2px;background:var(--et-theme-color-on-primary, rgb(0 0 0));opacity:1}.et-cascader-panel .et-cascader-node-chevron{flex:none;inline-size:12px;block-size:12px;color:var(--et-surface-color-muted-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-state{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:var(--et-cascader-node-height);padding:12px 16px;text-align:center;color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-state.et-cascader-state--error{flex-direction:column;gap:8px;font-size:12px}.et-cascader-panel .et-cascader-state-content{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .12s ease}.et-cascader-panel .et-cascader-state-content.et-cascader-state-content--visible{opacity:1}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-state-content{transition:none}}.et-cascader-panel .et-cascader-state-error-message{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}@keyframes et-cascader-title-enter-forward{0%{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-enter-backward{0%{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-forward{to{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-backward{to{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-fade-in{0%{opacity:0}}@keyframes et-cascader-title-fade-out{to{opacity:0}}@keyframes et-cascader-column-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-cascader-column-in-backward{0%{opacity:0;transform:translate(-14px)}}@keyframes et-cascader-column-grow-in{0%{opacity:0;transform:translate(-10px)}}@keyframes et-cascader-crumb-in{0%{opacity:0;transform:translate(8px)}}@keyframes et-cascader-crumb-out{to{opacity:0;transform:translate(8px)}}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-column,.et-cascader-panel .et-cascader-sheet-title,.et-cascader-panel .et-cascader-crumb{animation:none}.et-cascader-panel .et-cascader-back,.et-cascader-panel .et-cascader-sheet-title-shift,.et-cascader-panel .et-cascader-columns-track{transition:none}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CascaderPanelComponent, decorators: [{
             type: Component,
@@ -21878,7 +21926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-sheet]': 'isSheet() || null',
                         '(focusin)': 'handleFocusIn()',
                         '(focusout)': 'handleFocusOut($event)',
-                    }, styles: ["@layer components{@property --et-cascader-column-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 220px;}@property --et-cascader-panel-max-block-size{syntax: \"<length-percentage>\"; inherits: false; initial-value: 320px;}@property --et-cascader-node-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--cascader[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--cascader[data-overlay-placement].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-cascader-panel{display:block;box-sizing:border-box;--_et-cascader-panel-max-block-size: min( var(--et-cascader-panel-max-block-size), var(--et-overlay-max-height, 100vh) );border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:14px;box-shadow:0 10px 24px #00000029;overflow:hidden}.et-cascader-panel.et-cascader-panel--resizing{overflow:clip}.et-cascader-panel:not([data-sheet])>.et-cascader-panel-body{inline-size:max-content}.et-cascader-panel .et-cascader-sheet-header{position:relative;display:flex;align-items:center;flex:none;box-sizing:border-box;block-size:var(--et-cascader-node-height);padding-block:4px;padding-inline:20px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-back{position:absolute;inset-block:0;inset-inline-start:20px;display:inline-flex;align-items:center;transition:opacity .18s ease,transform .18s ease}.et-cascader-panel .et-cascader-back.et-cascader-back--hidden{opacity:0;transform:translate(-6px);pointer-events:none}.et-cascader-panel .et-cascader-back-icon{rotate:-90deg}.et-cascader-panel .et-cascader-sheet-title-slot{position:relative;flex:1;min-inline-size:0;align-self:stretch;overflow:hidden;pointer-events:none}.et-cascader-panel .et-cascader-sheet-title-shift{position:absolute;inset:0;transform:translate(0);transition:transform .18s ease}.et-cascader-panel .et-cascader-sheet-header[data-back] .et-cascader-sheet-title-shift{transform:translate(var(--et-cascader-back-slot, 4em))}.et-cascader-panel .et-cascader-sheet-title{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-forward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-backward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-forward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-backward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--enter{animation:et-cascader-title-fade-in .18s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--leave{animation:et-cascader-title-fade-out .18s ease forwards}.et-cascader-panel .et-cascader-breadcrumbs{display:flex;align-items:center;gap:2px;box-sizing:border-box;inline-size:0;min-inline-size:100%;padding:6px;border-block-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));overflow:hidden}.et-cascader-panel .et-cascader-crumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--enter{animation:et-cascader-crumb-in .2s ease}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--leave{animation:et-cascader-crumb-out .16s ease forwards}.et-cascader-panel .et-cascader-breadcrumb{display:block;min-inline-size:0;padding:4px 8px;border:none;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--et-surface-color-muted-solid, currentColor);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;appearance:none;outline:none;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-cascader-panel .et-cascader-breadcrumb:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-cascader-panel .et-cascader-breadcrumb:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent);color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb[data-current]{color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb-chevron{flex:none;inline-size:10px;block-size:10px;color:var(--et-surface-color-subtle-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-columns{display:flex;max-block-size:var(--_et-cascader-panel-max-block-size)}.et-cascader-panel .et-cascader-columns:not([data-sheet]){display:block;inline-size:calc(var(--_et-cascader-visible-columns, 1) * var(--et-cascader-column-inline-size));overflow:clip}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column{box-sizing:border-box}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column--offstage{contain:size}.et-cascader-panel .et-cascader-columns[data-sheet]{display:block;flex:1;min-block-size:0;max-block-size:none;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column{inline-size:100%;block-size:100%;max-block-size:none;overflow:visible;border-inline-end:none}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:has(.et-cascader-state){display:flex;align-items:center;justify-content:center}.et-cascader-panel .et-cascader-columns-track{display:flex;max-block-size:inherit;transform:translate(calc(var(--_et-cascader-column-window-start, 0) * -1 * var(--et-cascader-column-inline-size)));transition:transform .24s ease}.et-cascader-panel .et-cascader-sheet-body{display:flex;flex-direction:column;block-size:min(60vh,480px)}.et-cascader-panel .et-cascader-search{padding:6px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-search input[etcascadersearch]{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-cascader-panel .et-cascader-search input[etcascadersearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-cascader-panel .et-cascader-search input[etcascadersearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-cascader-panel .et-cascader-results{display:block;box-sizing:border-box;inline-size:min(320px,calc(100vw - 24px));max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-sheet-body .et-cascader-results{flex:1;min-block-size:0;inline-size:100%;max-block-size:none}.et-cascader-panel .et-cascader-column{display:block;flex:none;inline-size:var(--et-cascader-column-inline-size);max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-column:not(:last-child){border-inline-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-in-forward .2s ease}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=backward]){animation:et-cascader-column-in-backward .2s ease}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-grow-in .18s ease}.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:var(--et-cascader-node-height);padding-inline:10px;border:none;border-radius:6px;background:transparent;font:inherit;text-align:start;color:inherit;cursor:pointer;appearance:none;outline:none;transition:background .12s ease}@media(hover:hover){:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):focus-visible,:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-focused]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-expanded]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-selected]{color:var(--et-theme-color-ink-solid, currentColor);font-weight:500}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-disabled]{cursor:default;opacity:.4}.et-cascader-panel .et-cascader-node-label,.et-cascader-panel .et-cascader-search-option-label{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.et-cascader-panel .et-cascader-search-option-ancestor{color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-check{position:relative;flex:none;inline-size:16px;block-size:16px;box-sizing:border-box;border:2px solid var(--et-surface-border-solid, rgb(255 255 255 / .3));border-radius:4px;transition:background .12s ease,border-color .12s ease}.et-cascader-panel .et-cascader-check:after{content:\"\";position:absolute;opacity:0}.et-cascader-panel [data-selected]>.et-cascader-check,.et-cascader-panel [data-indeterminate]>.et-cascader-check{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor)}.et-cascader-panel [data-selected]>.et-cascader-check:after{inset-inline-start:4px;inset-block-start:1px;inline-size:4px;block-size:8px;border:solid var(--et-theme-color-on-primary, rgb(0 0 0));border-width:0 2px 2px 0;rotate:45deg;opacity:1}.et-cascader-panel [data-indeterminate]>.et-cascader-check:after{inset-inline-start:2px;inset-block-start:5px;inline-size:8px;block-size:2px;background:var(--et-theme-color-on-primary, rgb(0 0 0));opacity:1}.et-cascader-panel .et-cascader-node-chevron{flex:none;inline-size:12px;block-size:12px;color:var(--et-surface-color-muted-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-state{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:var(--et-cascader-node-height);padding:12px 16px;text-align:center;color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-state.et-cascader-state--error{flex-direction:column;gap:8px;font-size:12px}.et-cascader-panel .et-cascader-state-error-message{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}@keyframes et-cascader-title-enter-forward{0%{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-enter-backward{0%{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-forward{to{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-backward{to{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-fade-in{0%{opacity:0}}@keyframes et-cascader-title-fade-out{to{opacity:0}}@keyframes et-cascader-column-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-cascader-column-in-backward{0%{opacity:0;transform:translate(-14px)}}@keyframes et-cascader-column-grow-in{0%{opacity:0;transform:translate(-10px)}}@keyframes et-cascader-crumb-in{0%{opacity:0;transform:translate(8px)}}@keyframes et-cascader-crumb-out{to{opacity:0;transform:translate(8px)}}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-column,.et-cascader-panel .et-cascader-sheet-title,.et-cascader-panel .et-cascader-crumb{animation:none}.et-cascader-panel .et-cascader-back,.et-cascader-panel .et-cascader-sheet-title-shift,.et-cascader-panel .et-cascader-columns-track{transition:none}}}\n"] }]
+                    }, styles: ["@layer components{@property --et-cascader-column-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 220px;}@property --et-cascader-panel-max-block-size{syntax: \"<length-percentage>\"; inherits: false; initial-value: 320px;}@property --et-cascader-node-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--cascader[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--cascader.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--cascader[data-overlay-placement].et-animation-enter-from,.et-overlay--cascader[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-cascader-panel{display:block;box-sizing:border-box;--_et-cascader-panel-max-block-size: min( var(--et-cascader-panel-max-block-size), var(--et-overlay-max-height, 100vh) );border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:14px;box-shadow:0 10px 24px #00000029;overflow:hidden}.et-cascader-panel.et-cascader-panel--resizing{overflow:clip}.et-cascader-panel:not([data-sheet])>.et-cascader-panel-body{inline-size:max-content}.et-cascader-panel .et-cascader-sheet-header{position:relative;display:flex;align-items:center;flex:none;box-sizing:border-box;block-size:var(--et-cascader-node-height);padding-block:4px;padding-inline:20px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-back{position:absolute;inset-block:0;inset-inline-start:20px;display:inline-flex;align-items:center;transition:opacity .18s ease,transform .18s ease}.et-cascader-panel .et-cascader-back.et-cascader-back--hidden{opacity:0;transform:translate(-6px);pointer-events:none}.et-cascader-panel .et-cascader-back-icon{rotate:-90deg}.et-cascader-panel .et-cascader-sheet-title-slot{position:relative;flex:1;min-inline-size:0;align-self:stretch;overflow:hidden;pointer-events:none}.et-cascader-panel .et-cascader-sheet-title-shift{position:absolute;inset:0;transform:translate(0);transition:transform .18s ease}.et-cascader-panel .et-cascader-sheet-header[data-back] .et-cascader-sheet-title-shift{transform:translate(var(--et-cascader-back-slot, 4em))}.et-cascader-panel .et-cascader-sheet-title{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-forward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--enter{animation:et-cascader-title-enter-backward .2s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=forward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-forward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=slide][data-nav=backward] .et-cascader-sheet-title--leave{animation:et-cascader-title-leave-backward .18s ease forwards}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--enter{animation:et-cascader-title-fade-in .18s ease}.et-cascader-panel .et-cascader-sheet-title-slot[data-anim=fade] .et-cascader-sheet-title--leave{animation:et-cascader-title-fade-out .18s ease forwards}.et-cascader-panel .et-cascader-breadcrumbs{display:flex;align-items:center;gap:2px;box-sizing:border-box;inline-size:0;min-inline-size:100%;padding:6px;border-block-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));overflow:hidden}.et-cascader-panel .et-cascader-crumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--enter{animation:et-cascader-crumb-in .2s ease}.et-cascader-panel .et-cascader-crumb.et-cascader-crumb--leave{animation:et-cascader-crumb-out .16s ease forwards}.et-cascader-panel .et-cascader-breadcrumb{display:block;min-inline-size:0;padding:4px 8px;border:none;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--et-surface-color-muted-solid, currentColor);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;appearance:none;outline:none;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-cascader-panel .et-cascader-breadcrumb:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-cascader-panel .et-cascader-breadcrumb:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent);color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb[data-current]{color:var(--et-surface-color-solid, currentColor)}.et-cascader-panel .et-cascader-breadcrumb-chevron{flex:none;inline-size:10px;block-size:10px;color:var(--et-surface-color-subtle-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-columns{display:flex;max-block-size:var(--_et-cascader-panel-max-block-size)}.et-cascader-panel .et-cascader-columns:not([data-sheet]){display:block;inline-size:calc(var(--_et-cascader-visible-columns, 1) * var(--et-cascader-column-inline-size));overflow:clip}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column{box-sizing:border-box}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column--offstage{contain:size}.et-cascader-panel .et-cascader-columns[data-sheet]{display:block;flex:1;min-block-size:0;max-block-size:none;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column{inline-size:100%;block-size:100%;max-block-size:none;overflow:visible;border-inline-end:none}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:has(.et-cascader-state){display:flex;align-items:center;justify-content:center}.et-cascader-panel .et-cascader-columns-track{display:flex;max-block-size:inherit;transform:translate(calc(var(--_et-cascader-column-window-start, 0) * -1 * var(--et-cascader-column-inline-size)));transition:transform .24s ease}.et-cascader-panel .et-cascader-sheet-body{display:flex;flex-direction:column;block-size:min(60vh,480px)}.et-cascader-panel .et-cascader-search{padding:6px;border-block-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-search input[etcascadersearch]{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-cascader-panel .et-cascader-search input[etcascadersearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-cascader-panel .et-cascader-search input[etcascadersearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-cascader-panel .et-cascader-results{display:block;box-sizing:border-box;inline-size:min(320px,calc(100vw - 24px));max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-sheet-body .et-cascader-results{flex:1;min-block-size:0;inline-size:100%;max-block-size:none}.et-cascader-panel .et-cascader-column{display:block;flex:none;inline-size:var(--et-cascader-column-inline-size);max-block-size:var(--_et-cascader-panel-max-block-size);overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:6px}.et-cascader-panel .et-cascader-column:not(:last-child){border-inline-end:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1))}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-in-forward .2s ease}.et-cascader-panel .et-cascader-columns[data-sheet] .et-cascader-column:where([data-nav=backward]){animation:et-cascader-column-in-backward .2s ease}.et-cascader-panel .et-cascader-columns:not([data-sheet]) .et-cascader-column:where([data-nav=forward]){animation:et-cascader-column-grow-in .18s ease}.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:var(--et-cascader-node-height);padding-inline:10px;border:none;border-radius:6px;background:transparent;font:inherit;text-align:start;color:inherit;cursor:pointer;appearance:none;outline:none;transition:background .12s ease}@media(hover:hover){:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option):focus-visible,:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-focused]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 16%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-expanded]{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent)}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-selected]{color:var(--et-theme-color-ink-solid, currentColor);font-weight:500}:is(.et-cascader-panel .et-cascader-node,.et-cascader-panel .et-cascader-search-option)[data-disabled]{cursor:default;opacity:.4}.et-cascader-panel .et-cascader-node-label,.et-cascader-panel .et-cascader-search-option-label{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.et-cascader-panel .et-cascader-search-option-ancestor{color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-check{position:relative;flex:none;inline-size:16px;block-size:16px;box-sizing:border-box;border:2px solid var(--et-surface-border-solid, rgb(255 255 255 / .3));border-radius:4px;transition:background .12s ease,border-color .12s ease}.et-cascader-panel .et-cascader-check:after{content:\"\";position:absolute;opacity:0}.et-cascader-panel [data-selected]>.et-cascader-check,.et-cascader-panel [data-indeterminate]>.et-cascader-check{border-color:var(--et-theme-color-primary-solid, currentColor);background:var(--et-theme-color-primary-solid, currentColor)}.et-cascader-panel [data-selected]>.et-cascader-check:after{inset-inline-start:4px;inset-block-start:1px;inline-size:4px;block-size:8px;border:solid var(--et-theme-color-on-primary, rgb(0 0 0));border-width:0 2px 2px 0;rotate:45deg;opacity:1}.et-cascader-panel [data-indeterminate]>.et-cascader-check:after{inset-inline-start:2px;inset-block-start:5px;inline-size:8px;block-size:2px;background:var(--et-theme-color-on-primary, rgb(0 0 0));opacity:1}.et-cascader-panel .et-cascader-node-chevron{flex:none;inline-size:12px;block-size:12px;color:var(--et-surface-color-muted-solid, currentColor);rotate:90deg}.et-cascader-panel .et-cascader-state{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:var(--et-cascader-node-height);padding:12px 16px;text-align:center;color:var(--et-surface-color-muted-solid, currentColor)}.et-cascader-panel .et-cascader-state.et-cascader-state--error{flex-direction:column;gap:8px;font-size:12px}.et-cascader-panel .et-cascader-state-content{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .12s ease}.et-cascader-panel .et-cascader-state-content.et-cascader-state-content--visible{opacity:1}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-state-content{transition:none}}.et-cascader-panel .et-cascader-state-error-message{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}@keyframes et-cascader-title-enter-forward{0%{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-enter-backward{0%{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-forward{to{opacity:0;transform:translate(-12px)}}@keyframes et-cascader-title-leave-backward{to{opacity:0;transform:translate(12px)}}@keyframes et-cascader-title-fade-in{0%{opacity:0}}@keyframes et-cascader-title-fade-out{to{opacity:0}}@keyframes et-cascader-column-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-cascader-column-in-backward{0%{opacity:0;transform:translate(-14px)}}@keyframes et-cascader-column-grow-in{0%{opacity:0;transform:translate(-10px)}}@keyframes et-cascader-crumb-in{0%{opacity:0;transform:translate(8px)}}@keyframes et-cascader-crumb-out{to{opacity:0;transform:translate(8px)}}@media(prefers-reduced-motion:reduce){.et-cascader-panel .et-cascader-column,.et-cascader-panel .et-cascader-sheet-title,.et-cascader-panel .et-cascader-crumb{animation:none}.et-cascader-panel .et-cascader-back,.et-cascader-panel .et-cascader-sheet-title-shift,.et-cascader-panel .et-cascader-columns-track{transition:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelBody: [{ type: i0.ViewChild, args: ['panelBody', { isSignal: true }] }] } });
 
 /**
@@ -22008,6 +22056,16 @@ class CascaderComponent {
             !this.cascader.disabled() &&
             !this.cascader.readonly(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+        this.columnLoading = computed(() => this.cascader.columns().some((column) => column.status === 'loading'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnLoading" }] : /* istanbul ignore next */ []));
+        /**
+         * A level's own spinner arrives late, while the state row it sits in is there from the first frame:
+         * a data source that answers in a few dozen milliseconds fills a blank column instead of trading a
+         * spinner for its nodes. One flag covers every column - only the level being drilled into loads.
+         */
+        this.showColumnSpinner = signalDeferredLoading(this.columnLoading);
+        /** Same treatment for the search results, which replace the columns while a query is in flight. */
+        this.showSearchSpinner = signalDeferredLoading(() => this.cascader.searchState().status === 'loading');
         mountControlSuffixStyles();
     }
     handleClearClick(event) {
@@ -22038,7 +22096,7 @@ class CascaderComponent {
         return !this.isColumnOffstage(columnIndex);
     }
     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          <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n          Searching\u2026\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          <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n          {{ cascaderLabels().loading }}\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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CascaderComponent, decorators: [{
             type: Component,
@@ -22085,7 +22143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         ColorInteractiveDirective,
                     ], host: {
                         class: 'et-cascader',
-                    }, 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          <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n          Searching\u2026\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          <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n          {{ cascaderLabels().loading }}\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"] }]
+                    }, 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"] }]
         }], ctorParameters: () => [], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }] } });
 
 const CASCADER_IMPORTS = [
@@ -23466,6 +23524,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * The space a side must offer before the picker takes it, in px - the tallest state any picker panel
+ * reaches (a six-week month grid, 333px). It has to stay at or above that, and it has to stay a
+ * constant: any threshold the shorter views clear - and `flip`, which compares the panel's own
+ * height - lets a picker that opened above the field drop below it the moment a drill into the month
+ * grid makes it shorter.
+ */
+const PICKER_MIN_AVAILABLE_SPACE = 340;
 /**
  * The picker overlay for the date, time, and date-time inputs - a thin binding of the shared
  * `createAnchoredPanelController` to the date-picker config (bottom sheet below `md`, an anchored
@@ -23505,13 +23571,10 @@ const createDatePickerOverlay = (options) => {
                 ...anchoredOverlayStrategy({
                     containerClass: ['et-overlay--anchored', 'et-overlay--date-picker'],
                     placement: 'bottom-start',
-                    // prefer flipping the alignment on the same side (right-align under the field) before
-                    // flipping up, so a field near the right viewport edge opens bottom-end, not shifted
-                    fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
                     offset: 4,
                     viewportPadding: 8,
                     autoResize: true,
-                    shift: { crossAxis: true },
+                    minAvailableSpace: PICKER_MIN_AVAILABLE_SPACE,
                 })().map((entry) => ({ ...entry, breakpoint: 'md' })),
             ],
         }),
@@ -23693,7 +23756,9 @@ class DatePickerInputDirective {
         ...(ngDevMode ? [{ debugName: "registeredSurface" }] : /* istanbul ignore next */ []));
         this.interactive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
-        this.hasValue = computed(() => this.mixed() || this.value() !== null || this.inputText().length > 0, /* @ts-ignore */
+        // `displayValue` is what the field actually renders, which outlives the value itself: the
+        // date-time input draws a half-pick there while its value is still null
+        this.hasValue = computed(() => this.mixed() || this.value() !== null || this.inputText().length > 0 || this.displayValue().length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
         this.shouldDisplayError = computed(() => this.touched() && (this.invalid() || this.parseError()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
@@ -24431,7 +24496,14 @@ class DateRangePickerInputDirective {
                 return true;
             }
             const { start, end } = this.value();
-            return (start !== null || end !== null || this.sides.start.inputText().length > 0 || this.sides.end.inputText().length > 0);
+            return (start !== null ||
+                end !== null ||
+                this.sides.start.inputText().length > 0 ||
+                this.sides.end.inputText().length > 0 ||
+                // what a field renders outlives the value itself: the date-time range input draws a
+                // half-pick there while that side's value is still null
+                this.displayValue('start') !== '' ||
+                this.displayValue('end') !== '');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
         this.shouldDisplayError = computed(() => this.touched() && (this.invalid() || this.parseError()), /* @ts-ignore */
@@ -24549,6 +24621,11 @@ class DateRangePickerInputDirective {
     }
     /** @internal Commits one side's typed text, with the subclass's parse rules. */
     commitSide(side, raw) {
+        // blurring a field nobody typed in is not an edit - and while a half-pick is on screen its
+        // placeholder text is not something to parse
+        if (raw === this.displayValue(side)) {
+            return;
+        }
         const state = this.sides[side];
         if (!raw.trim()) {
             state.inputText.set('');
@@ -24934,17 +25011,17 @@ const TIME_PICKER_ERROR_CODES = {
 };
 
 /** Seconds since midnight of a `Date`'s time of day. */
-const secondsOfDay = (date) => date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
+const secondsOfDay$1 = (date) => date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
 /** Puts a candidate's time of day onto `day`, leaving its milliseconds alone. */
 const setTimeOfDay = (day, candidate) => setSeconds(setMinutes(setHours(day, candidate.hour), candidate.minute), candidate.second);
 /** Whether a fully specified time of day passes the bounds and the filter. */
 const isTimeSelectable = (candidate, options) => {
     const { min, max, filter, day } = options;
     const candidateSeconds = candidate.hour * 3600 + candidate.minute * 60 + candidate.second;
-    if (min !== null && candidateSeconds < secondsOfDay(min)) {
+    if (min !== null && candidateSeconds < secondsOfDay$1(min)) {
         return false;
     }
-    if (max !== null && candidateSeconds > secondsOfDay(max)) {
+    if (max !== null && candidateSeconds > secondsOfDay$1(max)) {
         return false;
     }
     return filter === null || filter(setTimeOfDay(day, candidate));
@@ -25033,8 +25110,8 @@ const provideTimePickerLabels = /* @__PURE__ */ toProvideFn(TIME_PICKER_LABELS_D
 const injectTimePickerLabels = /* @__PURE__ */ toInjectFn(TIME_PICKER_LABELS_DEF);
 const TIME_PICKER_LABELS = /* @__PURE__ */ toToken(TIME_PICKER_LABELS_DEF);
 
-/** Coarsest first: a column can only place a range end when every unit above it holds the same value. */
-const UNITS_COARSEST_FIRST = ['period', 'hour', 'minute', 'second'];
+const NO_PENDING_PARTS = {};
+const secondsOfDay = (parts) => parts.hour * 3600 + parts.minute * 60 + parts.second;
 /** The next option a `±1` keyboard step lands on, wrapping and skipping disabled ones. */
 const nextEnabledIndex = (options, walk) => {
     for (let offset = 1; offset <= options.length; offset++) {
@@ -25096,16 +25173,20 @@ class TimePickerDirective {
         ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
         this.endLabel = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
-        /** The selected time of day, carried on a `Date`. Stays `null` until a part is picked. `single` mode. */
+        /**
+         * The selected time of day, carried on a `Date`. Stays `null` until an hour and a minute (and a
+         * second, where the format shows one) have been picked - parts arriving before that are held.
+         * `single` mode.
+         */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        /** `range` mode: the two selected times. An end stays `null` until one of its parts is picked. */
+        /** `range` mode: the two selected times. An end stays `null` until its parts add up to a time. */
         this.rangeValue = model({ start: null, end: null }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
         /** `range` mode: the end the columns show, and the one a pick writes. */
         this.activeSide = model('start', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeSide" }] : /* istanbul ignore next */ []));
-        /** `range` mode: a part was picked. The side is what a range-valued consumer cannot infer. */
+        /** `range` mode: an end became a whole time. The side is what a range-valued consumer cannot infer. */
         this.timeSelect = output();
         /** The string in effect: this instance's `hoursLabel`, else the domain's label set. */
         this.resolvedHoursLabel = computed(() => this.hoursLabel() ?? this.timePickerLabels().hours, /* @ts-ignore */
@@ -25129,6 +25210,9 @@ class TimePickerDirective {
         this.now = new Date();
         this.autoAdvanceSpent = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "autoAdvanceSpent" }] : /* istanbul ignore next */ []));
+        /** Per end, the parts picked while its value is still empty. Held until they add up to a whole time. */
+        this.pendingParts = signal({ start: {}, end: {} }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingParts" }] : /* istanbul ignore next */ []));
         this.effectiveFormat = computed(() => this.format() ?? this.defaultFormat, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
         this.effectiveLocale = computed(() => this.locale() ?? this.defaultLocale, /* @ts-ignore */
@@ -25164,21 +25248,41 @@ class TimePickerDirective {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sides" }] : /* istanbul ignore next */ []));
         /**
-         * The value, or "now" snapped to the steps - the time the columns anchor
-         * their roving focus and initial scroll position to, and the base a first
-         * part pick completes into a full value. Units without a column are zeroed
-         * so a completed anchor never carries an invisible seconds part.
+         * The units a whole time needs. AM/PM is deliberately not one of them: every hour already sits in
+         * a half-day, so an unpicked column follows the anchor rather than leaving the time incomplete.
+         */
+        this.requiredUnits = computed(() => this.formatSpec().showSeconds ? ['hour', 'minute', 'second'] : ['hour', 'minute'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredUnits" }] : /* istanbul ignore next */ []));
+        /** The parts held for the end the columns edit, empty once that end holds a value. */
+        this.activePending = computed(() => this.activeValue() === null ? this.pendingParts()[this.activeSide()] : NO_PENDING_PARTS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activePending" }] : /* istanbul ignore next */ []));
+        /**
+         * The value, or "now" snapped to the steps and moved onto whichever parts are
+         * already held - the time the columns anchor their roving focus and initial
+         * scroll position to, and the base the pick that completes a time builds on.
+         * Units without a column are zeroed so a completed anchor never carries an
+         * invisible seconds part.
          */
         this.anchorTime = computed(() => {
             const value = this.activeValue();
             if (value !== null) {
                 return value;
             }
-            const snappedMinute = this.now.getMinutes() - (this.now.getMinutes() % this.minuteStep());
-            const snappedSecond = this.formatSpec().showSeconds
-                ? this.now.getSeconds() - (this.now.getSeconds() % this.secondStep())
+            const pending = this.activePending();
+            const nowHour = this.now.getHours();
+            const period = pending.period === undefined ? null : pending.period === 1 ? 1 : 0;
+            let hour = nowHour;
+            if (pending.hour !== undefined) {
+                hour = this.toHour24(pending.hour, period ?? (nowHour < 12 ? 0 : 1));
+            }
+            else if (period !== null) {
+                hour = (nowHour % 12) + period * 12;
+            }
+            const minute = pending.minute ?? this.now.getMinutes() - (this.now.getMinutes() % this.minuteStep());
+            const second = this.formatSpec().showSeconds
+                ? (pending.second ?? this.now.getSeconds() - (this.now.getSeconds() % this.secondStep()))
                 : 0;
-            return setMilliseconds(setSeconds(setMinutes(setHours(startOfDay(this.now), this.now.getHours()), snappedMinute), snappedSecond), 0);
+            return setMilliseconds(setSeconds(setMinutes(setHours(startOfDay(this.now), hour), minute), second), 0);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "anchorTime" }] : /* istanbul ignore next */ []));
         this.periodLabels = computed(() => {
@@ -25248,18 +25352,21 @@ class TimePickerDirective {
             const anchor24 = getTimeParts(this.anchorTime(), 24);
             const constrained = this.constrained();
             const availability = this.availability();
+            const pending = this.activePending();
             const isDisabled = (fixed) => constrained && !hasSelectableTime(fixed, availability);
-            const rangeFlagsFor = this.rangeFlagsFactory({ anchor, hourCycle: spec.hourCycle });
+            // a held part reads as selected too - it is a pick, just not a whole time yet
+            const isSelected = (unit, optionValue) => selected !== null ? selected[unit] === optionValue : pending[unit] === optionValue;
+            const rangeFlagsFor = this.rangeFlagsFactory(anchor24);
             const buildOptions = (unit, column) => {
                 const toLabel = unit === 'hour' && spec.hourCycle === 12
                     ? (hour) => String(hour === 0 ? 12 : hour)
                     : (part) => String(part).padStart(2, '0');
-                const rangeFlags = rangeFlagsFor(unit);
+                const rangeFlags = rangeFlagsFor(unit, column.values);
                 return column.values.map((optionValue) => ({
                     unit,
                     value: optionValue,
                     label: toLabel(optionValue),
-                    selected: selected !== null && selected[unit] === optionValue,
+                    selected: isSelected(unit, optionValue),
                     disabled: isDisabled(column.fixedOf(optionValue)),
                     focused: (selected ?? anchor)[unit] === optionValue,
                     ...rangeFlags(optionValue),
@@ -25295,15 +25402,16 @@ class TimePickerDirective {
             }
             if (spec.hourCycle === 12) {
                 const labels = this.periodLabels();
-                const rangeFlags = rangeFlagsFor('period');
+                const periodValues = [0, 1];
+                const rangeFlags = rangeFlagsFor('period', periodValues);
                 columns.push({
                     unit: 'period',
                     label: this.resolvedPeriodLabel(),
-                    options: [0, 1].map((period) => ({
+                    options: periodValues.map((period) => ({
                         unit: 'period',
                         value: period,
                         label: labels[period] ?? '',
-                        selected: selected !== null && selected.period === period,
+                        selected: isSelected('period', period),
                         // a half-day is out only when none of its twelve hours has a selectable time
                         disabled: constrained &&
                             !this.hourValues().some((hour) => hasSelectableTime({ hour: hour + period * 12 }, availability)),
@@ -25317,21 +25425,32 @@ class TimePickerDirective {
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     }
     /**
-     * Commits one column's pick into the value. The first pick completes the
-     * anchor time (what the columns visibly focus) with the picked part. Bounds
-     * and filters keep the result selectable: the picked part stays put and the
-     * finer units move to the first value that works.
+     * Takes one column's pick. While the end being edited is still empty the pick
+     * is *held*, not committed - a lone hour is no more a time than a lone AM is,
+     * and committing one would put a minute nobody chose into the value. The pick
+     * that supplies the last missing unit commits them all at once; an AM/PM pick
+     * never is that one, since an unpicked half-day still follows the anchor.
+     *
+     * Once a value exists every pick edits it directly. Bounds and filters keep
+     * the result selectable: the picked part stays put and the finer units move to
+     * the first value that works.
      */
     selectPart(unit, optionValue) {
         if (this.optionsOf(unit).find((option) => option.value === optionValue)?.disabled) {
             return;
         }
+        if (this.activeValue() === null && !this.completesTime(unit)) {
+            this.holdPart(unit, optionValue);
+            return;
+        }
         const target = this.candidateFor(unit, optionValue);
         const resolved = this.constrained() ? this.resolveSelectable(unit, target) : target;
         if (resolved === null) {
             return;
         }
+        // the anchor folds in the held parts, so the value has to be built before they are dropped
         const next = setTimeOfDay(this.anchorTime(), resolved);
+        this.clearPending();
         if (this.mode() !== 'range') {
             this.value.set(next);
             return;
@@ -25342,8 +25461,9 @@ class TimePickerDirective {
     }
     /**
      * @internal What *activating* an option does (click, Enter, Space): the pick, plus a range's
-     * one-time hop to the other end - the first committed start opens the end, the way a calendar's
-     * first pick opens its range. The keyboard model deliberately routes through {@link selectPart}
+     * one-time hop to the other end - the pick that *completes* the start opens the end, the way a
+     * calendar's first pick opens its range. A held part changes no end, so the columns stay put until
+     * the start is a real time. The keyboard model deliberately routes through {@link selectPart}
      * instead: arrows commit as they move, so hopping there would strand the reader on the other end
      * halfway through browsing this one.
      */
@@ -25399,40 +25519,70 @@ class TimePickerDirective {
             this.selectPart(unit, match.value);
         }
     }
+    /** Whether picking `unit` fills the last of the columns a whole time needs. */
+    completesTime(unit) {
+        const pending = this.activePending();
+        return this.requiredUnits().every((required) => required === unit || pending[required] !== undefined);
+    }
+    holdPart(unit, optionValue) {
+        const side = this.activeSide();
+        const parts = this.pendingParts();
+        this.pendingParts.set({ ...parts, [side]: { ...parts[side], [unit]: optionValue } });
+    }
+    clearPending() {
+        const side = this.activeSide();
+        const parts = this.pendingParts();
+        if (Object.keys(parts[side]).length > 0) {
+            this.pendingParts.set({ ...parts, [side]: {} });
+        }
+    }
     /**
      * Builds the per-column reader for how an option relates to the *range* - which end it holds, and
-     * where in the band between the two ends it sits.
+     * whether the time it would pick falls inside the range.
      *
-     * A column can only place an end when every **coarser** unit of that end matches what the columns
-     * are showing: the minutes column may say where 09:15's `15` is while the hours sit on 9, but not
-     * while they sit on 17, where minute 15 belongs to a different hour and would read as an endpoint
-     * it is not. That one rule is what keeps the hours banded across 09:00–17:30 while the minutes stay
-     * plain, and what stops a 12-hour hours column from banding 9 AM to 5 PM, whose column order is not
-     * chronological across the half-day boundary.
-     *
-     * Within a column, option *values* ascend with time in every unit - hours `0–23`, `0–11` inside a
-     * half-day, stepped minutes and seconds, AM before PM - so the band is a plain numeric interval.
+     * An option bands when the candidate it produces - itself, with every other unit left at what the
+     * columns currently show - lands within the two ends' times of day. So the band answers "would
+     * picking this stay inside the range", and moves as the other columns do. Candidate time ascends
+     * with option value in every unit, so the banded values are contiguous and the first and last of
+     * them are the band's ends.
      */
-    rangeFlagsFactory(context) {
+    rangeFlagsFactory(anchor24) {
         const rangeParts = this.rangeParts();
-        return (unit) => {
-            const coarser = UNITS_COARSEST_FIRST.slice(0, UNITS_COARSEST_FIRST.indexOf(unit)).filter((coarserUnit) => coarserUnit !== 'period' || context.hourCycle === 12);
-            const placeable = (parts) => parts !== null && coarser.every((coarserUnit) => parts[coarserUnit] === context.anchor[coarserUnit])
-                ? parts
-                : null;
-            const start = placeable(rangeParts?.start ?? null);
-            const end = placeable(rangeParts?.end ?? null);
-            const bounds = start === null || end === null || start[unit] === end[unit]
-                ? null
-                : { from: Math.min(start[unit], end[unit]), to: Math.max(start[unit], end[unit]) };
+        const start = rangeParts?.start ?? null;
+        const end = rangeParts?.end ?? null;
+        const range = this.rangeValue();
+        const interval = this.intervalOfDay(range.start, range.end);
+        const candidateSeconds = (unit, optionValue) => {
+            switch (unit) {
+                case 'hour':
+                    return secondsOfDay({ ...anchor24, hour: this.toHour24(optionValue, anchor24.period) });
+                case 'minute':
+                    return secondsOfDay({ ...anchor24, minute: optionValue });
+                case 'second':
+                    return secondsOfDay({ ...anchor24, second: optionValue });
+                case 'period':
+                    return secondsOfDay({ ...anchor24, hour: (anchor24.hour % 12) + optionValue * 12 });
+            }
+        };
+        return (unit, values) => {
+            const banded = interval === null
+                ? []
+                : values.filter((optionValue) => {
+                    const seconds = candidateSeconds(unit, optionValue);
+                    return seconds >= interval.from && seconds <= interval.to;
+                });
             const bandOf = (optionValue) => {
-                if (bounds === null || optionValue < bounds.from || optionValue > bounds.to) {
+                const index = banded.indexOf(optionValue);
+                if (index === -1) {
                     return null;
                 }
-                if (optionValue === bounds.from) {
+                if (banded.length === 1) {
+                    return 'single';
+                }
+                if (index === 0) {
                     return 'start';
                 }
-                return optionValue === bounds.to ? 'end' : 'middle';
+                return index === banded.length - 1 ? 'end' : 'middle';
             };
             return (optionValue) => ({
                 rangeStart: start !== null && start[unit] === optionValue,
@@ -25441,6 +25591,15 @@ class TimePickerDirective {
             });
         };
     }
+    /** Both ends as times of day in ascending order, `null` unless the range holds both. */
+    intervalOfDay(start, end) {
+        if (this.mode() !== 'range' || start === null || end === null) {
+            return null;
+        }
+        const first = secondsOfDay(getTimeParts(start, 24));
+        const second = secondsOfDay(getTimeParts(end, 24));
+        return { from: Math.min(first, second), to: Math.max(first, second) };
+    }
     /** The 24-hour value a column option stands for, given the half-day in effect. */
     toHour24(hour, period) {
         return this.formatSpec().hourCycle === 12 ? (hour % 12) + period * 12 : hour;
@@ -25682,7 +25841,7 @@ class TimePickerComponent {
         this.timePicker = inject(TimePickerDirective);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()" }, classAttribute: "et-time-picker" }, hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "secondStep", "secondStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "hoursLabel", "hoursLabel", "minutesLabel", "minutesLabel", "secondsLabel", "secondsLabel", "periodLabel", "periodLabel", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect"] }], ngImport: i0, template: "@if (timePicker.mode() === 'range') {\n  <div class=\"et-time-picker-sides\">\n    @for (side of timePicker.sides(); track side.side) {\n      <button\n        [attr.aria-pressed]=\"side.active\"\n        [attr.data-side]=\"side.side\"\n        (click)=\"timePicker.setActiveSide(side.side)\"\n        class=\"et-time-picker-side\"\n        type=\"button\"\n      >\n        <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n        <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"et-time-picker-columns\">\n  @for (column of timePicker.columns(); track column.unit) {\n    <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n      @for (option of column.options; track option.value) {\n        <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start]):before{inset-block-start:50%}.et-time-picker .et-time-picker-option:where([data-band=end]):before{inset-block-end:50%}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"], dependencies: [{ kind: "directive", type: TimePickerColumnDirective, selector: "[etTimePickerColumn]", inputs: ["column"], exportAs: ["etTimePickerColumn"] }, { kind: "directive", type: TimePickerOptionDirective, selector: "button[etTimePickerOption]", inputs: ["option"], exportAs: ["etTimePickerOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()" }, classAttribute: "et-time-picker" }, hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "secondStep", "secondStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "hoursLabel", "hoursLabel", "minutesLabel", "minutesLabel", "secondsLabel", "secondsLabel", "periodLabel", "periodLabel", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect"] }], ngImport: i0, template: "@if (timePicker.mode() === 'range') {\n  <div class=\"et-time-picker-sides\">\n    @for (side of timePicker.sides(); track side.side) {\n      <button\n        [attr.aria-pressed]=\"side.active\"\n        [attr.data-side]=\"side.side\"\n        (click)=\"timePicker.setActiveSide(side.side)\"\n        class=\"et-time-picker-side\"\n        type=\"button\"\n      >\n        <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n        <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"et-time-picker-columns\">\n  @for (column of timePicker.columns(); track column.unit) {\n    <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n      @for (option of column.options; track option.value) {\n        <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start],[data-band=single]):before{border-start-start-radius:8px;border-start-end-radius:8px}.et-time-picker .et-time-picker-option:where([data-band=end],[data-band=single]):before{border-end-start-radius:8px;border-end-end-radius:8px}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"], dependencies: [{ kind: "directive", type: TimePickerColumnDirective, selector: "[etTimePickerColumn]", inputs: ["column"], exportAs: ["etTimePickerColumn"] }, { kind: "directive", type: TimePickerOptionDirective, selector: "button[etTimePickerOption]", inputs: ["option"], exportAs: ["etTimePickerOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -25713,7 +25872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ], host: {
                         class: 'et-time-picker',
                         '[attr.data-mode]': 'timePicker.mode()',
-                    }, template: "@if (timePicker.mode() === 'range') {\n  <div class=\"et-time-picker-sides\">\n    @for (side of timePicker.sides(); track side.side) {\n      <button\n        [attr.aria-pressed]=\"side.active\"\n        [attr.data-side]=\"side.side\"\n        (click)=\"timePicker.setActiveSide(side.side)\"\n        class=\"et-time-picker-side\"\n        type=\"button\"\n      >\n        <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n        <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"et-time-picker-columns\">\n  @for (column of timePicker.columns(); track column.unit) {\n    <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n      @for (option of column.options; track option.value) {\n        <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start]):before{inset-block-start:50%}.et-time-picker .et-time-picker-option:where([data-band=end]):before{inset-block-end:50%}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"] }]
+                    }, template: "@if (timePicker.mode() === 'range') {\n  <div class=\"et-time-picker-sides\">\n    @for (side of timePicker.sides(); track side.side) {\n      <button\n        [attr.aria-pressed]=\"side.active\"\n        [attr.data-side]=\"side.side\"\n        (click)=\"timePicker.setActiveSide(side.side)\"\n        class=\"et-time-picker-side\"\n        type=\"button\"\n      >\n        <span class=\"et-time-picker-side-label\">{{ side.label }}</span>\n        <span class=\"et-time-picker-side-value\">{{ side.value ?? '\u2014' }}</span>\n      </button>\n    }\n  </div>\n}\n\n<div class=\"et-time-picker-columns\">\n  @for (column of timePicker.columns(); track column.unit) {\n    <div [column]=\"column\" class=\"et-time-picker-column\" etTimePickerColumn>\n      @for (option of column.options; track option.value) {\n        <button [option]=\"option\" class=\"et-time-picker-option\" etTimePickerOption>{{ option.label }}</button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-column-size{syntax: \"<length>\"; inherits: true; initial-value: 240px;}@property --et-time-picker-option-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-columns{display:flex;gap:8px}.et-time-picker .et-time-picker-sides{display:flex;align-self:stretch;gap:2px;padding:3px;border-radius:10px;background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}.et-time-picker .et-time-picker-side{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;min-inline-size:0;padding:4px 10px;border:none;border-radius:7px;background:transparent;font:inherit;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}@media(hover:hover){.et-time-picker .et-time-picker-side:hover{background-color:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-time-picker .et-time-picker-side:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}.et-time-picker .et-time-picker-side[aria-pressed=true]{background-color:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 14%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}.et-time-picker .et-time-picker-side-label{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.et-time-picker .et-time-picker-side-value{font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-side:where(:not([aria-pressed=true])) .et-time-picker-side-value{color:var(--et-surface-color-subtle-solid, currentColor)}.et-time-picker .et-time-picker-column{display:flex;flex-direction:column;gap:2px;block-size:var(--et-time-picker-column-size);padding-block:calc((var(--et-time-picker-column-size) - var(--et-time-picker-option-size)) / 2);overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.et-time-picker .et-time-picker-column::-webkit-scrollbar{display:none}.et-time-picker .et-time-picker-column+.et-time-picker-column{border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:8px}.et-time-picker .et-time-picker-option{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;scroll-snap-align:center;min-inline-size:52px;block-size:var(--et-time-picker-option-size);padding-inline:8px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid);cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,color .15s ease}.et-time-picker .et-time-picker-option:before{content:\"\";position:absolute;z-index:-1;inset-block:-1px;inset-inline:0;display:none;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 12%,transparent)}.et-time-picker .et-time-picker-option:where([data-band]):before{display:block}.et-time-picker .et-time-picker-option:where([data-band=start],[data-band=single]):before{border-start-start-radius:8px;border-start-end-radius:8px}.et-time-picker .et-time-picker-option:where([data-band=end],[data-band=single]):before{border-end-start-radius:8px;border-end-end-radius:8px}.et-time-picker .et-time-picker-option:where([data-focused]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 8%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:where([data-disabled]){background:transparent;color:var(--et-surface-color-subtle-solid);opacity:.4;cursor:default}.et-time-picker .et-time-picker-option:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary);font-weight:600;opacity:1}.et-time-picker .et-time-picker-option:where([data-range-start],[data-range-end]):where(:not([data-selected])){color:var(--et-surface-color-solid);font-weight:600;opacity:1;box-shadow:inset 0 0 0 1px var(--et-theme-color-primary-solid)}@media(hover:hover){.et-time-picker .et-time-picker-option:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent);color:var(--et-surface-color-solid)}.et-time-picker .et-time-picker-option:hover:where([data-disabled]:not([data-selected])){background:transparent;color:var(--et-surface-color-subtle-solid)}.et-time-picker .et-time-picker-option:hover:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}}.et-time-picker .et-time-picker-option:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:-2px}}\n"] }]
         }] });
 
 const TIME_PICKER_IMPORTS = [
@@ -26587,6 +26746,172 @@ const parseDateTimeText = (value, options) => {
     return parseDateValue(trimmed, { format: 'P', locale, referenceDate });
 };
 
+/** date-fns' own pre-pass: the `P`/`p` locale formats are expanded before the format is tokenized. */
+const LONG_FORMAT_PATTERN = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
+/** date-fns' formatting tokenizer. */
+const TOKEN_PATTERN = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
+const TIME_TOKENS = /* @__PURE__ */ new Set([
+    'a',
+    'b',
+    'B',
+    'h',
+    'H',
+    'K',
+    'k',
+    'm',
+    's',
+    'S',
+    'X',
+    'x',
+    'O',
+    'z',
+    'Z',
+]);
+const DATE_TOKENS = /* @__PURE__ */ new Set([
+    'G',
+    'y',
+    'Y',
+    'R',
+    'u',
+    'Q',
+    'q',
+    'M',
+    'L',
+    'w',
+    'I',
+    'd',
+    'D',
+    'E',
+    'i',
+    'e',
+    'c',
+]);
+const LONG_FORMAT_WIDTHS = ['short', 'medium', 'long', 'full'];
+const widthOf = (run) => LONG_FORMAT_WIDTHS[Math.min(run, LONG_FORMAT_WIDTHS.length) - 1] ?? 'full';
+const expandLongToken = (token, formatLong) => {
+    const dateRun = token.match(/P+/)?.[0].length ?? 0;
+    const timeRun = token.match(/p+/)?.[0].length ?? 0;
+    if (dateRun === 0) {
+        return formatLong.time({ width: widthOf(timeRun) });
+    }
+    const date = formatLong.date({ width: widthOf(dateRun) });
+    if (timeRun === 0) {
+        return date;
+    }
+    return formatLong
+        .dateTime({ width: widthOf(dateRun) })
+        .replace('{{date}}', date)
+        .replace('{{time}}', formatLong.time({ width: widthOf(timeRun) }));
+};
+const expandLongFormats = (format, locale) => (format.match(LONG_FORMAT_PATTERN) ?? [])
+    .map((token) => (token[0] === 'P' || token[0] === 'p' ? expandLongToken(token, locale.formatLong) : token))
+    .join('');
+const kindOf = (token) => {
+    const first = token[0] ?? '';
+    if (first === "'") {
+        return 'literal';
+    }
+    if (TIME_TOKENS.has(first)) {
+        return 'time';
+    }
+    if (DATE_TOKENS.has(first)) {
+        return 'date';
+    }
+    // `t`/`T` are whole epoch timestamps, and an unknown letter is date-fns' problem, not ours
+    return /[a-zA-Z]/.test(first) ? 'unsplittable' : 'literal';
+};
+/**
+ * Splits a combined date & time format into the span carrying the time and the date format around
+ * it, so one half can be rendered while the other is still missing. Locale formats (`P`, `Pp`, …)
+ * are expanded first, exactly as date-fns expands them.
+ *
+ * `null` when the format has no time half, no date half, or interleaves the two (`h:mm 'on' d MMM
+ * HH`) - there is no single span to blank out then.
+ */
+const splitDateTimeFormat = (format, locale) => {
+    const tokens = expandLongFormats(format, locale ?? enUS).match(TOKEN_PATTERN);
+    if (tokens === null) {
+        return null;
+    }
+    const kinds = tokens.map(kindOf);
+    if (kinds.includes('unsplittable') || !kinds.includes('date')) {
+        return null;
+    }
+    const first = kinds.indexOf('time');
+    const last = kinds.lastIndexOf('time');
+    if (first === -1 || kinds.slice(first, last + 1).includes('date')) {
+        return null;
+    }
+    return {
+        datePrefix: tokens.slice(0, first).join(''),
+        time: tokens.slice(first, last + 1).join(''),
+        dateSuffix: tokens.slice(last + 1).join(''),
+    };
+};
+
+/** Every letter and digit blanked out, separators left standing: `12:00 AM` → `__:__ __`. */
+const blankOut = (text, placeholderChar) => text.replace(/[\p{L}\p{N}]/gu, placeholderChar);
+/**
+ * The field text for a half-picked date & time: the picked half rendered in `format`, the missing
+ * one blanked to placeholders (`08/13/2026, __:__ __`). `null` when nothing is picked yet, or when
+ * the format cannot be split into a date and a time half.
+ */
+const renderPartialDateTime = (options) => {
+    const reference = options.day ?? options.time;
+    if (reference === null) {
+        return null;
+    }
+    const split = splitDateTimeFormat(options.format, options.locale);
+    if (split === null) {
+        return null;
+    }
+    const placeholderChar = options.placeholderChar ?? '_';
+    const render = (format, source) => {
+        // date-fns throws on an empty pattern, and a split whose time span sits at either end has one
+        if (format === '') {
+            return '';
+        }
+        const text = formatDateValue(source ?? reference, { format, locale: options.locale }) ?? '';
+        return source === null ? blankOut(text, placeholderChar) : text;
+    };
+    return (render(split.datePrefix, options.day) + render(split.time, options.time) + render(split.dateSuffix, options.day));
+};
+const createPendingDateTime = () => {
+    const day = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "day" }] : /* istanbul ignore next */ []));
+    const time = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    const clear = () => {
+        day.set(null);
+        time.set(null);
+    };
+    return {
+        day: day.asReadonly(),
+        time: time.asReadonly(),
+        active: computed(() => day() !== null || time() !== null),
+        holdDay: (picked) => {
+            const held = time();
+            if (held === null) {
+                day.set(startOfDay(picked));
+                return null;
+            }
+            clear();
+            return withTimeOfDay(picked, held);
+        },
+        holdTime: (picked) => {
+            const held = day();
+            if (held === null) {
+                time.set(picked);
+                return null;
+            }
+            clear();
+            return withTimeOfDay(held, picked);
+        },
+        clearDay: () => day.set(null),
+        clear,
+    };
+};
+
 /**
  * A combined date & time form control with a `string | null` value (a date-fns
  * `valueFormat` wire string, ISO by default). Typed entry parses strictly
@@ -26595,6 +26920,10 @@ const parseDateTimeText = (value, options) => {
  * picker overlay hosts a calendar and a time picker side by side and stays open
  * across picks. String↔`Date` conversion happens exclusively here - calendar
  * and time picker only ever see `Date` objects.
+ *
+ * Picking is two half-picks: whichever half lands first is held (the field renders it against
+ * placeholders for the other) and the value stays `null` until the second one arrives, so a day
+ * never invents a midnight nobody chose.
  */
 class DateTimeInputDirective extends DatePickerInputDirective {
     constructor() {
@@ -26661,13 +26990,30 @@ class DateTimeInputDirective extends DatePickerInputDirective {
             return parseDateValue(value, { format: this.effectiveValueFormat(), locale: this.effectiveLocale() });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []));
-        /** The committed value rendered in `displayFormat`. */
+        this.halfPick = createPendingDateTime();
+        /** The day the picker calendar highlights - the committed one, else a day picked with no time yet. */
+        this.pickerDate = computed(() => this.dateTime() ?? this.halfPick.day(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerDate" }] : /* istanbul ignore next */ []));
+        /** The time the picker's columns mark as selected - the committed one, else a time picked with no day yet. */
+        this.pickerTime = computed(() => this.dateTime() ?? this.halfPick.time(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerTime" }] : /* istanbul ignore next */ []));
+        /** The committed value rendered in `displayFormat`, or a half-pick rendered against placeholders. */
         this.displayValue = computed(() => {
             const dateTime = this.dateTime();
-            if (dateTime === null) {
+            if (dateTime !== null) {
+                return formatDateValue(dateTime, { format: this.displayFormat(), locale: this.effectiveLocale() }) ?? '';
+            }
+            // a typing mask owns the field text and draws its own guides - a second set of placeholders
+            // would not survive its reconciliation anyway
+            if (this.maskPattern() !== null) {
                 return '';
             }
-            return formatDateValue(dateTime, { format: this.displayFormat(), locale: this.effectiveLocale() }) ?? '';
+            return (renderPartialDateTime({
+                day: this.halfPick.day(),
+                time: this.halfPick.time(),
+                format: this.displayFormat(),
+                locale: this.effectiveLocale(),
+            }) ?? '');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     }
@@ -26677,6 +27023,12 @@ class DateTimeInputDirective extends DatePickerInputDirective {
      * `parseError` (the value stays `null`).
      */
     commitInput(raw) {
+        // blurring a field nobody typed in is not an edit - and while a half-pick is on screen its
+        // placeholder text is not something to parse
+        if (raw === this.displayValue()) {
+            return;
+        }
+        this.halfPick.clear();
         if (!raw.trim()) {
             this.inputText.set('');
             this.parseError.set(false);
@@ -26703,32 +27055,47 @@ class DateTimeInputDirective extends DatePickerInputDirective {
         this.commitDateTime(parsed);
     }
     /**
-     * Commits a calendar-picked day, keeping the committed time of day (midnight
-     * while there is none yet). The picker stays open - the user likely still
-     * wants to pick a time.
+     * Commits a calendar-picked day onto the committed time of day, or holds it until a time is
+     * picked. The picker stays open - the user likely still wants to pick that time.
      */
     selectDate(date) {
         if (date === null || !this.interactive()) {
             return;
         }
         const current = this.dateTime();
-        this.commitDateTime(current === null ? startOfDay(date) : withTimeOfDay(date, current));
-        this.touched.set(true);
+        this.resolvePick(current === null ? this.halfPick.holdDay(date) : withTimeOfDay(date, current));
     }
     /**
-     * Commits a picker-selected time onto the committed day (the picked time's
-     * own day - today - while there is none yet). The picker stays open - a time
-     * takes one selection per column.
+     * Commits a picker-selected time onto the committed day, or holds it until a day is picked. The
+     * picker stays open - a time takes one selection per column.
      */
     selectTime(time) {
         if (time === null || !this.interactive()) {
             return;
         }
         const current = this.dateTime();
-        this.commitDateTime(withTimeOfDay(current ?? time, time));
+        this.resolvePick(current === null ? this.halfPick.holdTime(time) : withTimeOfDay(current, time));
+    }
+    /** Drops a held half along with the value - the two are one control state. */
+    clearValue() {
+        super.clearValue();
+        this.halfPick.clear();
+    }
+    /** Commits a completed pick, or settles the control around a half that is still waiting. */
+    resolvePick(dateTime) {
+        if (dateTime !== null) {
+            this.commitDateTime(dateTime);
+        }
+        else if (this.mixed()) {
+            // a half-pick resolves the bulk-edit mask like any other pick: replace, never merge into
+            // the hidden raw value
+            this.value.set(null);
+            this.mixed.set(false);
+        }
         this.touched.set(true);
     }
     commitDateTime(dateTime) {
+        this.halfPick.clear();
         this.inputText.set('');
         this.parseError.set(false);
         this.value.set(formatDateValue(dateTime, { format: this.effectiveValueFormat(), locale: this.effectiveLocale() }));
@@ -26829,11 +27196,14 @@ class DateTimeInputComponent {
          */
         this.paneNav = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paneNav" }] : /* istanbul ignore next */ []));
+        this.paneAdvanceSpent = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paneAdvanceSpent" }] : /* istanbul ignore next */ []));
         // every picker open starts back on the calendar pane, without a slide
         effect(() => {
             if (this.dateTimeInput.pickerOpen()) {
                 this.activePane.set('date');
                 this.paneNav.set(null);
+                this.paneAdvanceSpent.set(false);
             }
         });
     }
@@ -26842,8 +27212,24 @@ class DateTimeInputComponent {
         event.stopPropagation();
         this.dateTimeInput.clearValue();
     }
+    /**
+     * A day is only half of a date & time, so the first one picked carries the tabs on to the time
+     * pane - the bottom sheet's version of the desktop panel showing both at once. Once only: after
+     * that the tabs stay where they are put, so going back to correct the day is never interrupted.
+     */
+    handleDateSelect(date) {
+        this.dateTimeInput.selectDate(date);
+        if (date === null || this.paneAdvanceSpent()) {
+            return;
+        }
+        this.paneAdvanceSpent.set(true);
+        this.showPane('time');
+    }
     setActivePane(pane) {
-        const next = pane === 'time' ? 'time' : 'date';
+        this.paneAdvanceSpent.set(true);
+        this.showPane(pane === 'time' ? 'time' : 'date');
+    }
+    showPane(next) {
         if (next === this.activePane()) {
             return;
         }
@@ -26851,7 +27237,7 @@ class DateTimeInputComponent {
         this.activePane.set(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-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 }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", 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-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, 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", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\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    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.dateTime()\"\n          [min]=\"dateTimeInput.minDate()\"\n          [max]=\"dateTimeInput.maxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"dateTimeInput.selectDate($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.dateTime()\"\n            [format]=\"dateTimeInput.displayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { 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: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-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 }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", 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-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, 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", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\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    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.minDate()\"\n          [max]=\"dateTimeInput.maxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [format]=\"dateTimeInput.displayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { 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: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
@@ -26904,7 +27290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ], host: {
                         class: 'et-date-time-input',
-                    }, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\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    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.dateTime()\"\n          [min]=\"dateTimeInput.minDate()\"\n          [max]=\"dateTimeInput.maxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"dateTimeInput.selectDate($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.dateTime()\"\n            [format]=\"dateTimeInput.displayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
+                    }, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\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    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.minDate()\"\n          [max]=\"dateTimeInput.maxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [format]=\"dateTimeInput.displayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-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-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], dateTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTabLabel", required: false }] }], timeTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeTabLabel", 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 DATE_TIME_INPUT_IMPORTS = [
@@ -26928,7 +27314,9 @@ const DATE_TIME_RANGE_INPUT_ERROR_CODES = {
  * single date-time input.
  *
  * The picker never closes on its own - a completed day range is only half the range, so the reader
- * still has both times to set.
+ * still has both times to set. Each side is picked in two halves: whichever half lands first is
+ * held (the field renders it against placeholders for the other) and that side's value stays `null`
+ * until the second one arrives, so a day never invents a midnight nobody chose.
  */
 class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
     constructor() {
@@ -26978,10 +27366,23 @@ class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
         ...(ngDevMode ? [{ debugName: "resolvedParseErrorMessage" }] : /* istanbul ignore next */ []));
         this.controlType = signal(FORM_FIELD_CONTROL_TYPES.DATE_TIME_RANGE_INPUT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
+        this.halfPicks = { start: createPendingDateTime(), end: createPendingDateTime() };
+        /** The two days the picker calendar highlights - committed, else picked with no time yet. */
+        this.pickerDateRange = computed(() => ({
+            start: this.startDate() ?? this.halfPicks.start.day(),
+            end: this.endDate() ?? this.halfPicks.end.day(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerDateRange" }] : /* istanbul ignore next */ []));
+        /** The two times the picker's columns mark as selected - committed, else picked with no day yet. */
+        this.pickerTimeRange = computed(() => ({
+            start: this.startDate() ?? this.halfPicks.start.time(),
+            end: this.endDate() ?? this.halfPicks.end.time(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerTimeRange" }] : /* istanbul ignore next */ []));
     }
     /**
-     * Commits a picker day range, keeping each side's committed time of day (midnight while there is
-     * none yet). The picker stays open - the times are still to come.
+     * Commits a picker day range onto each side's committed time of day, holding the days whose time
+     * is still missing. The picker stays open - those times are still to come.
      */
     selectCalendarRange(range) {
         if (!this.interactive()) {
@@ -26992,18 +27393,53 @@ class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
         this.touched.set(true);
     }
     /**
-     * Commits a picker-selected time onto one side's committed day. While that side has no day yet the
-     * *other* side's day is used - setting the end time of an appointment whose start day is known
-     * means that day, not today - and today only when the range is still empty.
+     * Commits a picker-selected time onto one side's day. While that side has no day yet the *other*
+     * side's is used - setting the end time of an appointment whose start day is known means that day
+     * - and while the range is empty the time is held until a day is picked.
      */
     selectTime(side, time) {
         if (time === null || !this.interactive()) {
             return;
         }
-        const day = this.sideDate(side) ?? this.sideDate(side === 'start' ? 'end' : 'start') ?? time;
-        this.commitSideDate(side, withTimeOfDay(day, time));
+        const day = this.sideDay(side) ?? this.sideDay(side === 'start' ? 'end' : 'start');
+        if (day === null) {
+            this.halfPicks[side].holdTime(time);
+            this.resolvePendingMixed();
+        }
+        else {
+            this.halfPicks[side].clear();
+            this.commitSideDate(side, withTimeOfDay(day, time));
+        }
         this.touched.set(true);
     }
+    /** The committed text of one side, or its half-pick rendered against placeholders. */
+    displayValue(side) {
+        const committed = super.displayValue(side);
+        // a typing mask owns the field text and draws its own guides - a second set of placeholders
+        // would not survive its reconciliation anyway
+        if (committed !== '' || this.maskPattern() !== null) {
+            return committed;
+        }
+        return (renderPartialDateTime({
+            day: this.halfPicks[side].day(),
+            time: this.halfPicks[side].time(),
+            format: this.effectiveDisplayFormat(),
+            locale: this.effectiveLocale(),
+        }) ?? '');
+    }
+    /** An actual edit to a side's field invalidates whatever half was held for it. */
+    commitSide(side, raw) {
+        if (raw !== this.displayValue(side)) {
+            this.halfPicks[side].clear();
+        }
+        super.commitSide(side, raw);
+    }
+    /** Drops both held halves along with the range - they are one control state. */
+    clearRange() {
+        super.clearRange();
+        this.halfPicks.start.clear();
+        this.halfPicks.end.clear();
+    }
     parseSideCommit(raw) {
         return parseDateTimeText(raw, {
             format: this.effectiveDisplayFormat(),
@@ -27011,12 +27447,30 @@ class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
             referenceDate: startOfDay(new Date()),
         });
     }
+    /** The day one side stands on: its committed one, else a day picked while its time is still missing. */
+    sideDay(side) {
+        return this.sideDate(side) ?? this.halfPicks[side].day();
+    }
     mergeDay(day, side) {
+        const held = this.halfPicks[side];
+        // the calendar reports `end: null` for its whole first click, so dropping the held *time* here
+        // would delete a time the reader picked before the days
         if (day === null) {
+            held.clearDay();
             return null;
         }
         const committed = this.sideDate(side);
-        return committed === null ? startOfDay(day) : withTimeOfDay(day, committed);
+        return committed === null ? held.holdDay(day) : withTimeOfDay(day, committed);
+    }
+    /**
+     * A half-pick resolves the bulk-edit mask like any other pick: replace, never merge into the
+     * hidden raw range. `writeRange` already does this for a calendar pick.
+     */
+    resolvePendingMixed() {
+        if (this.mixed()) {
+            this.value.set({ start: null, end: null });
+            this.mixed.set(false);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DateTimeRangeInputDirective, isStandalone: true, selector: "[etDateTimeRangeInput]", inputs: { parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DATE_PICKER_HOST, useExisting: DateTimeRangeInputDirective }], exportAs: ["etDateTimeRangeInput"], usesInheritance: true, ngImport: i0 }); }
@@ -27126,11 +27580,14 @@ class DateTimeRangeInputComponent {
          */
         this.paneNav = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paneNav" }] : /* istanbul ignore next */ []));
+        this.paneAdvanceSpent = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paneAdvanceSpent" }] : /* istanbul ignore next */ []));
         // every picker open starts back on the calendar pane, without a slide
         effect(() => {
             if (this.rangeInput.pickerOpen()) {
                 this.activePane.set('dates');
                 this.paneNav.set(null);
+                this.paneAdvanceSpent.set(false);
             }
         });
     }
@@ -27139,8 +27596,25 @@ class DateTimeRangeInputComponent {
         event.stopPropagation();
         this.rangeInput.clearRange();
     }
+    /**
+     * Two days are only half of a date & time range, so completing them carries the tabs on to the
+     * times pane - the bottom sheet's version of the desktop panel showing both at once. Once only:
+     * after that the tabs stay where they are put, so going back to correct the days is never
+     * interrupted.
+     */
+    handleRangeSelect(range) {
+        this.rangeInput.selectCalendarRange(range);
+        if (range.start === null || range.end === null || this.paneAdvanceSpent()) {
+            return;
+        }
+        this.paneAdvanceSpent.set(true);
+        this.showPane('times');
+    }
     setActivePane(pane) {
-        const next = PANE_ORDER.find((candidate) => candidate === pane) ?? 'dates';
+        this.paneAdvanceSpent.set(true);
+        this.showPane(PANE_ORDER.find((candidate) => candidate === pane) ?? 'dates');
+    }
+    showPane(next) {
         const current = this.activePane();
         if (next === current) {
             return;
@@ -27149,7 +27623,7 @@ class DateTimeRangeInputComponent {
         this.activePane.set(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-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 }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", 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-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, 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", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "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-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\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    <div class=\"et-date-time-range-input-panel\">\n      <div class=\"et-date-time-range-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-range-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [rangeValue]=\"rangeInput.calendarRange()\"\n          [min]=\"rangeInput.minDate()\"\n          [max]=\"rangeInput.maxDate()\"\n          [dateFilter]=\"rangeInput.dateFilter()\"\n          [startAt]=\"rangeInput.startAt()\"\n          [startView]=\"rangeInput.startView()\"\n          [dateClass]=\"rangeInput.dateClass()\"\n          [weekNumbers]=\"rangeInput.weekNumbers()\"\n          [locale]=\"rangeInput.effectiveLocale()\"\n          (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n          mode=\"range\"\n        />\n\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      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { 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: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-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 }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", 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-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, 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", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "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-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\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    <div class=\"et-date-time-range-input-panel\">\n      <div class=\"et-date-time-range-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-range-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [rangeValue]=\"rangeInput.pickerDateRange()\"\n          [min]=\"rangeInput.minDate()\"\n          [max]=\"rangeInput.maxDate()\"\n          [dateFilter]=\"rangeInput.dateFilter()\"\n          [startAt]=\"rangeInput.startAt()\"\n          [startView]=\"rangeInput.startView()\"\n          [dateClass]=\"rangeInput.dateClass()\"\n          [weekNumbers]=\"rangeInput.weekNumbers()\"\n          [locale]=\"rangeInput.effectiveLocale()\"\n          (rangeValueChange)=\"handleRangeSelect($event)\"\n          mode=\"range\"\n        />\n\n        <et-time-picker\n          [rangeValue]=\"rangeInput.pickerTimeRange()\"\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      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { 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: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateTimeRangeInputComponent, decorators: [{
             type: Component,
@@ -27205,7 +27679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'et-date-time-range-input',
                         role: 'group',
                         '[attr.aria-labelledby]': 'rangeInput.labelId()',
-                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\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    <div class=\"et-date-time-range-input-panel\">\n      <div class=\"et-date-time-range-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-range-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [rangeValue]=\"rangeInput.calendarRange()\"\n          [min]=\"rangeInput.minDate()\"\n          [max]=\"rangeInput.maxDate()\"\n          [dateFilter]=\"rangeInput.dateFilter()\"\n          [startAt]=\"rangeInput.startAt()\"\n          [startView]=\"rangeInput.startView()\"\n          [dateClass]=\"rangeInput.dateClass()\"\n          [weekNumbers]=\"rangeInput.weekNumbers()\"\n          [locale]=\"rangeInput.effectiveLocale()\"\n          (rangeValueChange)=\"rangeInput.selectCalendarRange($event)\"\n          mode=\"range\"\n        />\n\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      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
+                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\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    <div class=\"et-date-time-range-input-panel\">\n      <div class=\"et-date-time-range-input-panel-tabs\">\n        <et-segmented-button-group [value]=\"activePane()\" (valueChange)=\"setActivePane($event)\">\n          <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"activePane()\"\n        [attr.data-nav]=\"paneNav()\"\n        class=\"et-date-time-range-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [rangeValue]=\"rangeInput.pickerDateRange()\"\n          [min]=\"rangeInput.minDate()\"\n          [max]=\"rangeInput.maxDate()\"\n          [dateFilter]=\"rangeInput.dateFilter()\"\n          [startAt]=\"rangeInput.startAt()\"\n          [startView]=\"rangeInput.startView()\"\n          [dateClass]=\"rangeInput.dateClass()\"\n          [weekNumbers]=\"rangeInput.weekNumbers()\"\n          [locale]=\"rangeInput.effectiveLocale()\"\n          (rangeValueChange)=\"handleRangeSelect($event)\"\n          mode=\"range\"\n        />\n\n        <et-time-picker\n          [rangeValue]=\"rangeInput.pickerTimeRange()\"\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      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;flex:1 1 auto;inline-size:22em;min-inline-size:0;container:et-date-time-range-input / inline-size;color:inherit}et-date-time-range-input .et-date-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-date-time-range-input .et-date-time-range-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-range-input .et-date-time-range-input-field:disabled{cursor:not-allowed}et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-date-time-range-input .et-date-time-range-input-separator{color:var(--et-surface-color-muted-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0;--et-time-picker-column-size: 300px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker .et-time-picker-columns{justify-content:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], datesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesTabLabel", required: false }] }], timesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timesTabLabel", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", 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 DATE_TIME_RANGE_INPUT_IMPORTS = [
@@ -27377,6 +27851,10 @@ class DurationInputDirective {
         /** Message the form field shows when typed text can't be parsed as a duration. */
         this.parseErrorMessage = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "parseErrorMessage" }] : /* istanbul ignore next */ []));
+        /** Author-supplied `aria-label`, forwarded onto the field. Names a control with no projected label. */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /** Author-supplied `aria-labelledby`, forwarded onto the field. Takes precedence over the projected label. */
+        this.ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
         /** The segment layout: `h`/`m`/`s`/`S` token runs plus separators. @default `'mm:ss'` */
         this.durationFormat = input('mm:ss', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "durationFormat" }] : /* istanbul ignore next */ []));
@@ -27410,8 +27888,10 @@ class DurationInputDirective {
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
         this.controlType = signal(FORM_FIELD_CONTROL_TYPES.DURATION_INPUT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
-        this.labelId = computed(() => this.formField?.registeredLabel()?.id() ?? null, /* @ts-ignore */
+        this.labelId = computed(() => this.ariaLabelledby()?.trim() || (this.formField?.registeredLabel()?.id() ?? null), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.hasCustomAccessibleName = computed(() => !!this.ariaLabel()?.trim() || !!this.ariaLabelledby()?.trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasCustomAccessibleName" }] : /* istanbul ignore next */ []));
         /** @internal */
         this.registeredField = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registeredField" }] : /* istanbul ignore next */ []));
@@ -27473,7 +27953,7 @@ class DurationInputDirective {
         this.mixed.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DurationInputDirective, isStandalone: true, selector: "[etDurationInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, durationFormat: { classPropertyName: "durationFormat", publicName: "durationFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange" }, host: { properties: { "attr.data-mixed": "mixed() || null" } }, exportAs: ["etDurationInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: DurationInputDirective, isStandalone: true, selector: "[etDurationInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, parseErrorMessage: { classPropertyName: "parseErrorMessage", publicName: "parseErrorMessage", 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 }, durationFormat: { classPropertyName: "durationFormat", publicName: "durationFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange" }, host: { properties: { "attr.data-mixed": "mixed() || null" } }, exportAs: ["etDurationInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputDirective, decorators: [{
             type: Directive,
@@ -27484,7 +27964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-mixed]': 'mixed() || null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], parseErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseErrorMessage", required: false }] }], durationFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationFormat", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], parseErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseErrorMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], durationFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationFormat", required: false }] }] } });
 
 /**
  * The text field of a duration input: shows the committed value in the format layout,
@@ -27546,7 +28026,7 @@ class DurationInputFieldDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DurationInputFieldDirective, isStandalone: true, selector: "input[etDurationInputField]", host: { attributes: { "type": "text", "inputmode": "numeric", "autocomplete": "off" }, listeners: { "input": "handleInput()", "focus": "handleFocus()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "attr.placeholder": "durationInput?.effectivePlaceholder() || null", "attr.aria-required": "durationInput?.required() || null", "attr.aria-invalid": "durationInput?.shouldDisplayError() || null", "attr.aria-describedby": "durationInput?.describedBy() || null", "attr.aria-labelledby": "durationInput?.labelId() || null", "disabled": "durationInput?.disabled() || false", "readOnly": "durationInput?.readonly() || false" } }, exportAs: ["etDurationInputField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DurationInputFieldDirective, isStandalone: true, selector: "input[etDurationInputField]", host: { attributes: { "type": "text", "inputmode": "numeric", "autocomplete": "off" }, listeners: { "input": "handleInput()", "focus": "handleFocus()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "attr.placeholder": "durationInput?.effectivePlaceholder() || null", "attr.aria-required": "durationInput?.required() || null", "attr.aria-invalid": "durationInput?.shouldDisplayError() || null", "attr.aria-describedby": "durationInput?.describedBy() || null", "attr.aria-label": "durationInput?.ariaLabel() || null", "attr.aria-labelledby": "durationInput?.labelId() || null", "disabled": "durationInput?.disabled() || false", "readOnly": "durationInput?.readonly() || false" } }, exportAs: ["etDurationInputField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputFieldDirective, decorators: [{
             type: Directive,
@@ -27561,6 +28041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-required]': 'durationInput?.required() || null',
                         '[attr.aria-invalid]': 'durationInput?.shouldDisplayError() || null',
                         '[attr.aria-describedby]': 'durationInput?.describedBy() || null',
+                        '[attr.aria-label]': 'durationInput?.ariaLabel() || null',
                         '[attr.aria-labelledby]': 'durationInput?.labelId() || null',
                         '[disabled]': 'durationInput?.disabled() || false',
                         '[readOnly]': 'durationInput?.readonly() || false',
@@ -27597,7 +28078,7 @@ class DurationInputComponent {
         this.durationInput.clearValue();
     }
     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"], 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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DurationInputComponent, decorators: [{
             type: Component,
@@ -27618,6 +28099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                                 'placeholder',
                                 'parseErrorMessage',
                                 'durationFormat',
+                                'aria-label',
+                                'aria-labelledby',
                             ],
                             outputs: ['valueChange', 'mixedChange', 'touchedChange'],
                         },
@@ -29213,9 +29696,14 @@ class FormFieldComponent {
         ...(ngDevMode ? [{ debugName: "warningAnimatable" }] : /* istanbul ignore next */ []));
         this.hintAnimatable = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatable" }] : /* istanbul ignore next */ []));
-        /** Whether the field is showing its busy affordance - a pending async validator, or `[busy]`. */
+        /** Whether the field is busy - a pending async validator, or `[busy]`. */
         this.isBusy = computed(() => this.busy() || this.formFieldDir.isPending(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        /**
+         * The spinner follows `isBusy()` late: a validator that settles in a few dozen milliseconds would
+         * otherwise flash one. `aria-busy` still reports the real state from the first moment.
+         */
+        this.showBusySpinner = signalDeferredLoading(this.isBusy);
         this.errorDimensions = signalElementDimensions(this.errorContent);
         this.warningDimensions = signalElementDimensions(this.warningContent);
         this.hintDimensions = signalElementDimensions(this.hintContent);
@@ -29418,7 +29906,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 (isBusy()) {\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;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-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 .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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -29461,7 +29949,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 (isBusy()) {\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;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-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 .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"] }]
         }], 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 = [
@@ -36119,6 +36607,11 @@ class MenuComponent {
         ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
         this.searchLoading = computed(() => this.search()?.loading() ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchLoading" }] : /* istanbul ignore next */ []));
+        /**
+         * The spinner (and the room the input gives it) follows the search late: a query that answers
+         * within a keystroke or two would otherwise flash it, and the input's text would shift for it.
+         */
+        this.showSearchSpinner = signalDeferredLoading(this.searchLoading);
         this.searchError = computed(() => this.search()?.error() ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchError" }] : /* istanbul ignore next */ []));
         this.searchErrorId = createComponentId('et-menu-search-error');
@@ -36145,13 +36638,13 @@ class MenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyContentElement", first: true, predicate: ["menuBodyContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (searchLoading()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ 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: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyContentElement", first: true, predicate: ["menuBodyContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ 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: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-menu', encapsulation: ViewEncapsulation.None, imports: [ProvideColorDirective, SpinnerComponent], hostDirectives: [MenuPanelDirective, ProvideColorDirective, AutoSurfaceDirective], host: {
                         class: 'et-menu',
-                    }, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (searchLoading()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
+                    }, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerElement: [{ type: i0.ViewChild, args: ['menuHeader', { isSignal: true }] }], bodyContentElement: [{ type: i0.ViewChild, args: ['menuBodyContent', { isSignal: true }] }] } });
 
 const MENU_IMPORTS = [
@@ -40432,6 +40925,12 @@ class SelectDirective {
         /** Async option state - rendered by `et-select` as a loading row. From `[etSelectOptions]` if set. */
         this.loading = computed(() => this.asyncOptions()?.loading() ?? this.loadingInput(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * `loading()`, held back so a request that resolves quickly never flashes an indicator. Drive what
+         * the reader *sees* off this - the spinner, the busy bar - and geometry off `loading()`, so the
+         * panel takes its final height from the first frame instead of growing into it.
+         */
+        this.showLoadingIndicator = signalDeferredLoading(this.loading);
         /** Async option state - rendered by `et-select` as an error row. From `[etSelectOptions]` if set. */
         this.error = computed(() => this.asyncOptions()?.error() ?? this.errorInput(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
@@ -40615,6 +41114,15 @@ class SelectDirective {
         /** @internal Lower-cased query for option matching. */
         this.normalizedQuery = computed(() => this.query().trim().toLowerCase(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "normalizedQuery" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the request in flight is the next page the reader asked for, rather than a refetch of the
+         * list itself. `et-select` reports the two differently: a load-more turns the control the reader
+         * just clicked into a loading row, everything else runs a busy bar over the options.
+         *
+         * Set by `requestLoadMore()` and cleared as soon as `loading()` drops or the query moves on.
+         */
+        this.loadingMore = linkedSignal({ ...(ngDevMode ? { debugName: "loadingMore" } : /* istanbul ignore next */ {}), source: () => ({ loading: this.loading(), query: this.normalizedQuery() }),
+            computation: (source, previous) => source.loading && source.query === previous?.source.query && (previous?.value ?? false) });
         /**
          * @internal The query the panel filters by. Live while open; frozen at its last value
          * otherwise - the close-time query clear must not unfilter the options while the panel
@@ -40956,6 +41464,9 @@ class SelectDirective {
         if (this.loading()) {
             return;
         }
+        // marked before the emit: the consumer may turn `loading` on synchronously from the handler,
+        // and the flag has to be set by the time that lands or the panel reports the wrong wait
+        this.loadingMore.set(true);
         this.loadMore.emit();
     }
     /**
@@ -42439,7 +42950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class SelectOptionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto var(--et-select-option-height);transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto 0;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\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: SelectOptionComponent, decorators: [{
             type: Component,
@@ -42450,7 +42961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ], host: {
                         class: 'et-select-option',
-                    }, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto var(--et-select-option-height);transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"] }]
+                    }, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto 0;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"] }]
         }] });
 
 /**
@@ -42763,7 +43274,7 @@ class SelectPanelComponent {
         <ng-content select="[etSelectPanelExtras]" />
       </div>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-select-panel-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-select-panel-padding{syntax: \"<length>\"; inherits: false; initial-value: 6px;}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--select[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--select[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--select[data-overlay-placement].et-animation-enter-from,.et-overlay--select[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-select-panel{display:grid;grid-template-rows:minmax(0,1fr);box-sizing:border-box;max-block-size:min(var(--et-select-panel-max-height),var(--et-overlay-max-height, 100vh));overflow:hidden;--_et-select-panel-padding: var(--et-select-panel-padding);border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:var(--et-select-option-font-size, 14px);box-shadow:0 10px 24px #00000029}.et-select-panel .et-select-panel-scroller{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:var(--_et-select-panel-padding)}.et-select-panel.et-select-panel--resizing .et-select-panel-scroller{overflow:clip}.et-select-panel .et-select-listbox,.et-select-panel .et-select-panel-extras{display:contents}.et-select-panel .et-select-state{display:flex;align-items:center;gap:8px;min-block-size:var(--et-select-option-height, 36px);padding-inline:var(--et-select-option-padding-inline, 10px);font-size:var(--et-select-option-font-size, 14px);color:var(--et-surface-color-muted-solid, currentColor)}.et-select-panel .et-select-state.et-select-state--error{font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new{position:relative;display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);inline-size:100%;min-block-size:var(--et-select-option-height, 36px);margin-block-start:7px;padding-inline:var(--et-select-option-padding-inline, 10px);border:none;border-radius:var(--et-select-option-border-radius, 6px);background:transparent;font:inherit;font-size:var(--et-select-option-font-size, 14px);text-align:start;color:var(--et-theme-color-ink-solid, currentColor);cursor:pointer;appearance:none;transition:background .12s ease}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):before{content:\"\";position:absolute;inset-inline:calc(var(--et-select-panel-padding, 6px) * -1);inset-block-start:-4px;block-size:1px;background:var(--et-surface-border-solid, rgb(255 255 255 / .1))}@media(hover:hover){:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new) .et-icon{flex:none;inline-size:16px;block-size:16px}.et-select-panel .et-select-load-more+.et-select-add-new{margin-block-start:2px}.et-select-panel .et-select-load-more+.et-select-add-new:before{content:none}.et-select-panel .et-select-load-more-icon{rotate:180deg}.et-overlay--select-content-width .et-select-panel{max-inline-size:min(400px,calc(100vw - 24px))}}\n"], dependencies: [{ kind: "directive", type: SelectListboxDirective, selector: "[etSelectListbox]", exportAs: ["etSelectListbox"] }, { kind: "directive", type: SelectViewportDirective, selector: "[etSelectViewport]", exportAs: ["etSelectViewport"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-select-panel-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-select-panel-padding{syntax: \"<length>\"; inherits: false; initial-value: 6px;}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--select[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--select[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--select[data-overlay-placement].et-animation-enter-from,.et-overlay--select[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-select-panel{position:relative;display:grid;grid-template-rows:minmax(0,1fr);box-sizing:border-box;max-block-size:min(var(--et-select-panel-max-height),var(--et-overlay-max-height, 100vh));overflow:hidden;--_et-select-panel-padding: var(--et-select-panel-padding);border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:var(--et-select-option-font-size, 14px);box-shadow:0 10px 24px #00000029}.et-select-panel .et-select-panel-scroller{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:var(--_et-select-panel-padding)}.et-select-panel.et-select-panel--resizing .et-select-panel-scroller{overflow:clip}.et-select-panel .et-select-listbox,.et-select-panel .et-select-panel-extras{display:contents}.et-select-panel .et-select-busy-bar{position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-select-panel .et-select-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-select-busy-sweep 1.1s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-select-panel .et-select-busy-bar:after{inline-size:100%;animation:none}}.et-select-panel .et-select-state{display:flex;align-items:center;gap:8px;min-block-size:var(--et-select-option-height, 36px);padding-inline:var(--et-select-option-padding-inline, 10px);font-size:var(--et-select-option-font-size, 14px);color:var(--et-surface-color-muted-solid, currentColor)}.et-select-panel .et-select-state.et-select-state--error{font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-select-panel .et-select-state-content{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .12s ease}.et-select-panel .et-select-state-content.et-select-state-content--visible{opacity:1}@media(prefers-reduced-motion:reduce){.et-select-panel .et-select-state-content{transition:none}}.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new{position:relative;display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);inline-size:100%;min-block-size:var(--et-select-option-height, 36px);margin-block-start:7px;padding-inline:var(--et-select-option-padding-inline, 10px);border:none;border-radius:var(--et-select-option-border-radius, 6px);background:transparent;font:inherit;font-size:var(--et-select-option-font-size, 14px);text-align:start;color:var(--et-theme-color-ink-solid, currentColor);cursor:pointer;appearance:none;transition:background .12s ease}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):before{content:\"\";position:absolute;inset-inline:calc(var(--et-select-panel-padding, 6px) * -1);inset-block-start:-4px;block-size:1px;background:var(--et-surface-border-solid, rgb(255 255 255 / .1))}@media(hover:hover){:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):not(:disabled):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):not(:disabled):active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):disabled{color:var(--et-surface-color-muted-solid, currentColor);cursor:default}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new).et-select-load-more--loading{color:var(--et-surface-color-muted-solid, currentColor);cursor:default;pointer-events:none}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new) .et-icon{flex:none;inline-size:16px;block-size:16px}.et-select-panel .et-select-load-more+.et-select-add-new{margin-block-start:2px}.et-select-panel .et-select-load-more+.et-select-add-new:before{content:none}.et-select-panel .et-select-load-more-icon{rotate:180deg}.et-overlay--select-content-width .et-select-panel{max-inline-size:min(400px,calc(100vw - 24px))}@keyframes et-select-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}}\n"], dependencies: [{ kind: "directive", type: SelectListboxDirective, selector: "[etSelectListbox]", exportAs: ["etSelectListbox"] }, { kind: "directive", type: SelectViewportDirective, selector: "[etSelectViewport]", exportAs: ["etSelectViewport"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectPanelComponent, decorators: [{
             type: Component,
@@ -42778,7 +43289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     </div>
   `, encapsulation: ViewEncapsulation.None, imports: [SelectListboxDirective, SelectViewportDirective], hostDirectives: [ProvideColorDirective, AutoSurfaceDirective], host: {
                         class: 'et-select-panel',
-                    }, styles: ["@layer components{@property --et-select-panel-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-select-panel-padding{syntax: \"<length>\"; inherits: false; initial-value: 6px;}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--select[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--select[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--select[data-overlay-placement].et-animation-enter-from,.et-overlay--select[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-select-panel{display:grid;grid-template-rows:minmax(0,1fr);box-sizing:border-box;max-block-size:min(var(--et-select-panel-max-height),var(--et-overlay-max-height, 100vh));overflow:hidden;--_et-select-panel-padding: var(--et-select-panel-padding);border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:var(--et-select-option-font-size, 14px);box-shadow:0 10px 24px #00000029}.et-select-panel .et-select-panel-scroller{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:var(--_et-select-panel-padding)}.et-select-panel.et-select-panel--resizing .et-select-panel-scroller{overflow:clip}.et-select-panel .et-select-listbox,.et-select-panel .et-select-panel-extras{display:contents}.et-select-panel .et-select-state{display:flex;align-items:center;gap:8px;min-block-size:var(--et-select-option-height, 36px);padding-inline:var(--et-select-option-padding-inline, 10px);font-size:var(--et-select-option-font-size, 14px);color:var(--et-surface-color-muted-solid, currentColor)}.et-select-panel .et-select-state.et-select-state--error{font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new{position:relative;display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);inline-size:100%;min-block-size:var(--et-select-option-height, 36px);margin-block-start:7px;padding-inline:var(--et-select-option-padding-inline, 10px);border:none;border-radius:var(--et-select-option-border-radius, 6px);background:transparent;font:inherit;font-size:var(--et-select-option-font-size, 14px);text-align:start;color:var(--et-theme-color-ink-solid, currentColor);cursor:pointer;appearance:none;transition:background .12s ease}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):before{content:\"\";position:absolute;inset-inline:calc(var(--et-select-panel-padding, 6px) * -1);inset-block-start:-4px;block-size:1px;background:var(--et-surface-border-solid, rgb(255 255 255 / .1))}@media(hover:hover){:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new) .et-icon{flex:none;inline-size:16px;block-size:16px}.et-select-panel .et-select-load-more+.et-select-add-new{margin-block-start:2px}.et-select-panel .et-select-load-more+.et-select-add-new:before{content:none}.et-select-panel .et-select-load-more-icon{rotate:180deg}.et-overlay--select-content-width .et-select-panel{max-inline-size:min(400px,calc(100vw - 24px))}}\n"] }]
+                    }, styles: ["@layer components{@property --et-select-panel-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-select-panel-padding{syntax: \"<length>\"; inherits: false; initial-value: 6px;}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--select[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--select[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--select[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--select.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--select.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--select[data-overlay-placement].et-animation-enter-from,.et-overlay--select[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}.et-select-panel{position:relative;display:grid;grid-template-rows:minmax(0,1fr);box-sizing:border-box;max-block-size:min(var(--et-select-panel-max-height),var(--et-overlay-max-height, 100vh));overflow:hidden;--_et-select-panel-padding: var(--et-select-panel-padding);border-radius:10px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:var(--et-surface-background-solid, rgb(32 32 32));color:var(--et-surface-color-solid, rgb(244 244 245));font-size:var(--et-select-option-font-size, 14px);box-shadow:0 10px 24px #00000029}.et-select-panel .et-select-panel-scroller{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:var(--_et-select-panel-padding)}.et-select-panel.et-select-panel--resizing .et-select-panel-scroller{overflow:clip}.et-select-panel .et-select-listbox,.et-select-panel .et-select-panel-extras{display:contents}.et-select-panel .et-select-busy-bar{position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-select-panel .et-select-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-select-busy-sweep 1.1s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-select-panel .et-select-busy-bar:after{inline-size:100%;animation:none}}.et-select-panel .et-select-state{display:flex;align-items:center;gap:8px;min-block-size:var(--et-select-option-height, 36px);padding-inline:var(--et-select-option-padding-inline, 10px);font-size:var(--et-select-option-font-size, 14px);color:var(--et-surface-color-muted-solid, currentColor)}.et-select-panel .et-select-state.et-select-state--error{font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-select-panel .et-select-state-content{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .12s ease}.et-select-panel .et-select-state-content.et-select-state-content--visible{opacity:1}@media(prefers-reduced-motion:reduce){.et-select-panel .et-select-state-content{transition:none}}.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new{position:relative;display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);inline-size:100%;min-block-size:var(--et-select-option-height, 36px);margin-block-start:7px;padding-inline:var(--et-select-option-padding-inline, 10px);border:none;border-radius:var(--et-select-option-border-radius, 6px);background:transparent;font:inherit;font-size:var(--et-select-option-font-size, 14px);text-align:start;color:var(--et-theme-color-ink-solid, currentColor);cursor:pointer;appearance:none;transition:background .12s ease}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):before{content:\"\";position:absolute;inset-inline:calc(var(--et-select-panel-padding, 6px) * -1);inset-block-start:-4px;block-size:1px;background:var(--et-surface-border-solid, rgb(255 255 255 / .1))}@media(hover:hover){:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):not(:disabled):hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):not(:disabled):active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new):disabled{color:var(--et-surface-color-muted-solid, currentColor);cursor:default}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new).et-select-load-more--loading{color:var(--et-surface-color-muted-solid, currentColor);cursor:default;pointer-events:none}:is(.et-select-panel .et-select-load-more,.et-select-panel .et-select-add-new) .et-icon{flex:none;inline-size:16px;block-size:16px}.et-select-panel .et-select-load-more+.et-select-add-new{margin-block-start:2px}.et-select-panel .et-select-load-more+.et-select-add-new:before{content:none}.et-select-panel .et-select-load-more-icon{rotate:180deg}.et-overlay--select-content-width .et-select-panel{max-inline-size:min(400px,calc(100vw - 24px))}@keyframes et-select-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelBody: [{ type: i0.ViewChild, args: ['panelBody', { isSignal: true }] }] } });
 
 /**
@@ -42812,7 +43323,7 @@ class SelectVirtualOptionComponent {
     <span class="et-select-option-check">
       <i etIcon="et-check"></i>
     </span>
-  `, isInline: true, styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto var(--et-select-option-height);transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto 0;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { 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: SelectVirtualOptionComponent, decorators: [{
             type: Component,
@@ -42835,7 +43346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ], host: {
                         class: 'et-select-option',
-                    }, styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto var(--et-select-option-height);transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"] }]
+                    }, styles: ["@layer components{@property --et-select-option-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-select-option-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-select-option-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-select-option-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-select-option-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-select-option-check-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-select-option{display:flex;align-items:center;gap:var(--et-select-option-gap);min-block-size:var(--et-select-option-height);padding-inline:var(--et-select-option-padding-inline);border-radius:var(--et-select-option-border-radius);font-size:var(--et-select-option-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;content-visibility:auto;contain-intrinsic-block-size:auto 0;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-select-option[data-filtered]{display:none}.et-select-option:where([data-active][data-active-source=keyboard]){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}@media(hover:hover){.et-select-option:where([data-active]:hover){background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,transparent)}}.et-select-option:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,transparent)}.et-select-option:where([aria-disabled=true]){opacity:.4;cursor:not-allowed}.et-select-option:where([aria-disabled=true]):active{background:transparent}.et-select-option .et-select-option-check{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size);color:var(--et-theme-color-primary-solid, currentColor);opacity:0}.et-select-option .et-select-option-check .et-icon{inline-size:100%;block-size:100%}.et-select-option:where([data-selected]) .et-select-option-check{opacity:1}.et-select-option .et-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-select-option.et-select-create-option{color:var(--et-theme-color-ink-solid, currentColor)}.et-select-option.et-select-create-option .et-select-option-check{display:none}.et-select-option.et-select-create-option .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap)}.et-select-option.et-select-create-option .et-select-create-option-icon{flex:none;inline-size:var(--et-select-option-check-size);block-size:var(--et-select-option-check-size)}}\n"] }]
         }] });
 
 class SelectComponent {
@@ -42878,6 +43389,26 @@ class SelectComponent {
         ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
         this.hasSearch = computed(() => !!this.select.registeredSearch(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+        /**
+         * Nothing to show yet, so the state row stands in for the options. Keyed on the raw `loading()`,
+         * not the deferred indicator: the row reserves the height its content will need from the first
+         * frame, and it keeps the empty state from claiming the panel while a first page is on its way.
+         */
+        this.showLoadingRow = computed(() => this.select.loading() && !this.select.visibleItems().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLoadingRow" }] : /* istanbul ignore next */ []));
+        /**
+         * The next page the reader asked for: the control they clicked becomes a loading row in its own
+         * place, at its own height, and the busy bar stays out of it - one wait, reported once, where they
+         * are looking.
+         */
+        this.showLoadMoreLoading = computed(() => this.select.hasMoreItems() &&
+            !this.showLoadingRow() &&
+            this.select.loadingMore() &&
+            this.select.showLoadingIndicator(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLoadMoreLoading" }] : /* istanbul ignore next */ []));
+        /** Loading over options the reader can already see: they stay, and the busy bar carries the news. */
+        this.showBusyBar = computed(() => this.select.showLoadingIndicator() && this.select.visibleItems().length > 0 && !this.showLoadMoreLoading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showBusyBar" }] : /* istanbul ignore next */ []));
         // whether the default value/placeholder span renders - never with an inline search
         // input: in single mode the input itself displays the selected label, in multi mode
         // the chips (or the input's placeholder) carry the value display. With a custom value
@@ -42940,7 +43471,7 @@ class SelectComponent {
         this.select.activate();
     }
     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's loading row is the single spinner -->\n  @if (select.loading() && !select.open()) {\n    <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\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      @if (select.loading()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\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() && !select.loading()) {\n        <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n          {{ resolvedLoadMoreLabel() }}\n        </button>\n      }\n\n      @if (select.allowAddNew() && !select.loading()) {\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-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}.et-select-arrow .et-icon{rotate:180deg}}\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 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -43005,7 +43536,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's loading row is the single spinner -->\n  @if (select.loading() && !select.open()) {\n    <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\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      @if (select.loading()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\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() && !select.loading()) {\n        <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n          {{ resolvedLoadMoreLabel() }}\n        </button>\n      }\n\n      @if (select.allowAddNew() && !select.loading()) {\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-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}.et-select-arrow .et-icon{rotate:180deg}}\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 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"] }]
         }], 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 = [
@@ -59834,13 +60365,15 @@ class TableComponent {
         /** Loading with nothing to show yet: placeholder rows stand in for the rows that are coming. */
         this.showPlaceholderRows = computed(() => this.resolvedLoading() && !this.hasError() && !this.rows().length, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPlaceholderRows" }] : /* istanbul ignore next */ []));
+        this.refetchingOverRows = computed(() => this.resolvedLoading() && !this.hasError() && this.rows().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refetchingOverRows" }] : /* istanbul ignore next */ []));
         /**
          * Loading over rows that are already on screen: they stay, and the busy bar carries the news. This
          * is the case a paged/refetching table is in most of the time, and blanking it there would cost the
-         * user their place for no gain.
+         * user their place for no gain. Deferred, because a page that arrives quickly would otherwise leave
+         * nothing behind but a flicker under the header.
          */
-        this.showBusyBar = computed(() => this.resolvedLoading() && !this.hasError() && this.rows().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showBusyBar" }] : /* istanbul ignore next */ []));
+        this.showBusyBar = signalDeferredLoading(this.refetchingOverRows);
         /** The leading utility cells, with the pinning every row kind applies to them. */
         this.leadCells = computed(() => {
             const pinning = this.columnPinning();
@@ -63523,12 +64056,14 @@ class TabBarUnderlineDirective {
             if (!previousOriginEl || !this.tabBar.animationsReady() || previousOriginEl === underlineEl) {
                 return;
             }
+            untracked(() => this.tabBar.runningUnderlineFlip())?.cancel();
             const flip = createFlipAnimation({
                 element: underlineEl,
                 originElement: previousOriginEl,
                 duration: 250,
                 easing: 'cubic-bezier(0.35, 0.25, 0.2, 1)',
             });
+            this.tabBar.runningUnderlineFlip.set(flip);
             flip.play();
         });
     }
@@ -63583,6 +64118,12 @@ class TabBarDirective {
         /** @internal */
         this.lastActiveUnderlineElement = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastActiveUnderlineElement" }] : /* istanbul ignore next */ []));
+        /**
+         * @internal Cancel this before the next transition measures its origin - a rect taken mid-flight
+         * reports the animated position, leaving the new transition nothing to travel.
+         */
+        this.runningUnderlineFlip = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "runningUnderlineFlip" }] : /* istanbul ignore next */ []));
         /** @internal */
         this.animationsReady = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animationsReady" }] : /* istanbul ignore next */ []));
@@ -63722,30 +64263,38 @@ const NAV_TABS_TOKEN = new InjectionToken('NAV_TABS_TOKEN');
 
 class NavTabLinkDirective {
     constructor() {
-        this.routerLinkActive = inject(RouterLinkActive, { self: true });
+        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);
         this.hostElement = injectHostElement();
         this.trigger = inject(TabBarTriggerDirective);
-        this.routerLinkIsActive = signal(this.routerLinkActive.isActive ?? false, /* @ts-ignore */
+        this.routerLinkIsActive = signal(this.routerLinkActive?.isActive ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "routerLinkIsActive" }] : /* istanbul ignore next */ []));
-        this.isActive = computed(() => this.routerLinkIsActive(), /* @ts-ignore */
+        this.isActive = computed(() => this.overlayRouterLink?.isActive() ?? this.routerLinkIsActive(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-        this.routerLinkActive.isActiveChange
+        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.isActive()) {
+            if (this.overlayRouter?.navigationPending()) {
+                return;
+            }
+            if (this.isActive() && this.tabBar?.activeTrigger() !== this.trigger) {
                 this.tabBar?.selectTrigger(this.trigger);
             }
         });
         if (ngDevMode) {
             afterNextRender(() => {
                 if (!this.navTabs) {
-                    throw new RuntimeError(TAB_ERROR_CODES.MISSING_NAV_TABS, '[NavTabLinkDirective] a[et-nav-tab-link] must be placed inside an et-nav-tabs element.', { element: this.hostElement });
+                    throw new RuntimeError(TAB_ERROR_CODES.MISSING_NAV_TABS, '[NavTabLinkDirective] a nav tab link must be placed inside an et-nav-tabs element.', { element: this.hostElement });
                 }
             });
         }
@@ -63853,21 +64402,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/** @internal */
+class NavTabLinkStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabLinkStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: NavTabLinkStylesComponent, isStandalone: true, selector: "et-nav-tab-link-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-nav-tab-link-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-nav-tab-link-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-nav-tab-link{--et-nav-tab-link-padding-inline: var(--et-tab-padding-inline);--et-nav-tab-link-padding-block: var(--et-tab-padding-block);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:var(--et-nav-tab-link-padding-inline);padding-block:var(--et-nav-tab-link-padding-block);text-decoration:none;color:var(--et-surface-interaction-solid, inherit);font-size:var(--et-nav-tabs-font-size, inherit);cursor:pointer;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease,background .15s ease;outline:none;border-radius:.5rem}.et-nav-tab-link.et-tab-bar-trigger--no-initial-transition{transition:none}@media(hover:hover){.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):hover{background:rgb(var(--et-color-primary, 0 0 0) / .08)}}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):focus-visible{background:rgb(var(--et-color-primary, 0 0 0) / .12)}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):active{background:rgb(var(--et-color-primary, 0 0 0) / .16)}[data-variant=primary] .et-nav-tab-link{flex-direction:column;gap:4px}.et-nav-tab-link [etIcon]{width:1.2em;height:1.2em}.et-nav-tab-link.et-nav-tab-link--active{color:var(--et-surface-color-solid, inherit)}.et-nav-tab-link.et-nav-tab-link--disabled{pointer-events:none;cursor:default}.et-nav-tab-link .et-nav-tab-link__content{display:inline-flex;align-items:center;gap:inherit;border-radius:.5rem;padding:4px 8px;margin:-4px -8px}.et-nav-tab-link:focus-visible .et-nav-tab-link__content{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-nav-tab-link .et-tab-bar-underline{position:absolute;z-index:1;background:var(--et-theme-color-ink-solid, currentColor);border-radius:var(--et-nav-tabs-underline-radius, 1px);pointer-events:none;opacity:0}.et-nav-tab-link .et-tab-bar-underline--active{opacity:1}[data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size, 2px);transform-origin:left}[data-variant=primary][data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{left:25%;right:25%;height:var(--et-nav-tabs-underline-size, 3px);border-radius:var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0 0}[data-orientation=vertical][data-fit=fill] .et-nav-tab-link{justify-content:start}[data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size, 2px);transform-origin:top}[data-variant=primary][data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{top:25%;bottom:25%;width:var(--et-nav-tabs-underline-size, 3px);border-radius:0 var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabLinkStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-nav-tab-link-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-nav-tab-link-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-nav-tab-link-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-nav-tab-link{--et-nav-tab-link-padding-inline: var(--et-tab-padding-inline);--et-nav-tab-link-padding-block: var(--et-tab-padding-block);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:var(--et-nav-tab-link-padding-inline);padding-block:var(--et-nav-tab-link-padding-block);text-decoration:none;color:var(--et-surface-interaction-solid, inherit);font-size:var(--et-nav-tabs-font-size, inherit);cursor:pointer;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease,background .15s ease;outline:none;border-radius:.5rem}.et-nav-tab-link.et-tab-bar-trigger--no-initial-transition{transition:none}@media(hover:hover){.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):hover{background:rgb(var(--et-color-primary, 0 0 0) / .08)}}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):focus-visible{background:rgb(var(--et-color-primary, 0 0 0) / .12)}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):active{background:rgb(var(--et-color-primary, 0 0 0) / .16)}[data-variant=primary] .et-nav-tab-link{flex-direction:column;gap:4px}.et-nav-tab-link [etIcon]{width:1.2em;height:1.2em}.et-nav-tab-link.et-nav-tab-link--active{color:var(--et-surface-color-solid, inherit)}.et-nav-tab-link.et-nav-tab-link--disabled{pointer-events:none;cursor:default}.et-nav-tab-link .et-nav-tab-link__content{display:inline-flex;align-items:center;gap:inherit;border-radius:.5rem;padding:4px 8px;margin:-4px -8px}.et-nav-tab-link:focus-visible .et-nav-tab-link__content{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-nav-tab-link .et-tab-bar-underline{position:absolute;z-index:1;background:var(--et-theme-color-ink-solid, currentColor);border-radius:var(--et-nav-tabs-underline-radius, 1px);pointer-events:none;opacity:0}.et-nav-tab-link .et-tab-bar-underline--active{opacity:1}[data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size, 2px);transform-origin:left}[data-variant=primary][data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{left:25%;right:25%;height:var(--et-nav-tabs-underline-size, 3px);border-radius:var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0 0}[data-orientation=vertical][data-fit=fill] .et-nav-tab-link{justify-content:start}[data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size, 2px);transform-origin:top}[data-variant=primary][data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{top:25%;bottom:25%;width:var(--et-nav-tabs-underline-size, 3px);border-radius:0 var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0}}\n"] }]
+        }] });
+/** @internal */
+const mountNavTabLinkStyles = () => injectStyleManager().mount(NavTabLinkStylesComponent);
+
 class NavTabLinkComponent {
     constructor() {
         this.navTabLink = inject(NavTabLinkDirective);
         this.elementRef = inject(ElementRef);
+        mountNavTabLinkStyles();
     }
     handleSpace(event) {
         event.preventDefault();
         this.elementRef.nativeElement.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: NavTabLinkComponent, isStandalone: true, selector: "a[et-nav-tab-link]", host: { listeners: { "keydown.space": "handleSpace($event)" }, properties: { "class.et-nav-tab-link--active": "navTabLink.isActive()", "class.et-nav-tab-link--disabled": "navTabLink.trigger.disabled()" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: i1$1.RouterLink, inputs: ["routerLink", "et-nav-tab-link", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "state", "state", "relativeTo", "relativeTo"] }, { directive: i1$1.RouterLinkActive, inputs: ["routerLinkActive", "routerLinkActive", "routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"] }, { directive: TabBarTriggerDirective, inputs: ["disabled", "disabled"] }, { directive: NavTabLinkDirective }, { directive: FocusRingDirective }], ngImport: i0, template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`, isInline: true, styles: ["@layer components{@property --et-nav-tab-link-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-nav-tab-link-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-nav-tab-link{--et-nav-tab-link-padding-inline: var(--et-tab-padding-inline);--et-nav-tab-link-padding-block: var(--et-tab-padding-block);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:var(--et-nav-tab-link-padding-inline);padding-block:var(--et-nav-tab-link-padding-block);text-decoration:none;color:var(--et-surface-interaction-solid, inherit);font-size:var(--et-nav-tabs-font-size, inherit);cursor:pointer;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease,background .15s ease;outline:none;border-radius:.5rem}.et-nav-tab-link.et-tab-bar-trigger--no-initial-transition{transition:none}@media(hover:hover){.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):hover{background:rgb(var(--et-color-primary, 0 0 0) / .08)}}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):focus-visible{background:rgb(var(--et-color-primary, 0 0 0) / .12)}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):active{background:rgb(var(--et-color-primary, 0 0 0) / .16)}[data-variant=primary] .et-nav-tab-link{flex-direction:column;gap:4px}.et-nav-tab-link [etIcon]{width:1.2em;height:1.2em}.et-nav-tab-link.et-nav-tab-link--active{color:var(--et-surface-color-solid, inherit)}.et-nav-tab-link.et-nav-tab-link--disabled{pointer-events:none;cursor:default}.et-nav-tab-link .et-nav-tab-link__content{display:inline-flex;align-items:center;gap:inherit;border-radius:.5rem;padding:4px 8px;margin:-4px -8px}.et-nav-tab-link:focus-visible .et-nav-tab-link__content{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-nav-tab-link .et-tab-bar-underline{position:absolute;z-index:1;background:var(--et-theme-color-ink-solid, currentColor);border-radius:var(--et-nav-tabs-underline-radius, 1px);pointer-events:none;opacity:0}.et-nav-tab-link .et-tab-bar-underline--active{opacity:1}[data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size, 2px);transform-origin:left}[data-variant=primary][data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{left:25%;right:25%;height:var(--et-nav-tabs-underline-size, 3px);border-radius:var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0 0}[data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size, 2px);transform-origin:top}[data-variant=primary][data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{top:25%;bottom:25%;width:var(--et-nav-tabs-underline-size, 3px);border-radius:0 var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0}}\n"], dependencies: [{ kind: "directive", type: TabBarUnderlineDirective, selector: "[etTabBarUnderline]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: NavTabLinkComponent, isStandalone: true, selector: "a[et-nav-tab-link]", host: { listeners: { "keydown.space": "handleSpace($event)" }, properties: { "class.et-nav-tab-link--active": "navTabLink.isActive()", "class.et-nav-tab-link--disabled": "navTabLink.trigger.disabled()" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: i1$1.RouterLink, inputs: ["routerLink", "et-nav-tab-link", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "state", "state", "relativeTo", "relativeTo"] }, { directive: i1$1.RouterLinkActive, inputs: ["routerLinkActive", "routerLinkActive", "routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"] }, { directive: TabBarTriggerDirective, inputs: ["disabled", "disabled"] }, { directive: NavTabLinkDirective }, { directive: FocusRingDirective }], ngImport: i0, template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`, isInline: true, dependencies: [{ kind: "directive", type: TabBarUnderlineDirective, selector: "[etTabBarUnderline]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[et-nav-tab-link]', template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`, encapsulation: ViewEncapsulation.None, imports: [TabBarUnderlineDirective], hostDirectives: [
+            args: [{
+                    selector: 'a[et-nav-tab-link]',
+                    template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [TabBarUnderlineDirective],
+                    hostDirectives: [
                         {
                             directive: RouterLink,
                             inputs: [
@@ -63892,13 +64459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                         NavTabLinkDirective,
                         FocusRingDirective,
-                    ], host: {
+                    ],
+                    host: {
                         class: 'et-nav-tab-link',
                         '[class.et-nav-tab-link--active]': 'navTabLink.isActive()',
                         '[class.et-nav-tab-link--disabled]': 'navTabLink.trigger.disabled()',
                         '(keydown.space)': 'handleSpace($event)',
-                    }, styles: ["@layer components{@property --et-nav-tab-link-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-nav-tab-link-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-nav-tab-link{--et-nav-tab-link-padding-inline: var(--et-tab-padding-inline);--et-nav-tab-link-padding-block: var(--et-tab-padding-block);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:var(--et-nav-tab-link-padding-inline);padding-block:var(--et-nav-tab-link-padding-block);text-decoration:none;color:var(--et-surface-interaction-solid, inherit);font-size:var(--et-nav-tabs-font-size, inherit);cursor:pointer;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease,background .15s ease;outline:none;border-radius:.5rem}.et-nav-tab-link.et-tab-bar-trigger--no-initial-transition{transition:none}@media(hover:hover){.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):hover{background:rgb(var(--et-color-primary, 0 0 0) / .08)}}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):focus-visible{background:rgb(var(--et-color-primary, 0 0 0) / .12)}.et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):active{background:rgb(var(--et-color-primary, 0 0 0) / .16)}[data-variant=primary] .et-nav-tab-link{flex-direction:column;gap:4px}.et-nav-tab-link [etIcon]{width:1.2em;height:1.2em}.et-nav-tab-link.et-nav-tab-link--active{color:var(--et-surface-color-solid, inherit)}.et-nav-tab-link.et-nav-tab-link--disabled{pointer-events:none;cursor:default}.et-nav-tab-link .et-nav-tab-link__content{display:inline-flex;align-items:center;gap:inherit;border-radius:.5rem;padding:4px 8px;margin:-4px -8px}.et-nav-tab-link:focus-visible .et-nav-tab-link__content{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-nav-tab-link .et-tab-bar-underline{position:absolute;z-index:1;background:var(--et-theme-color-ink-solid, currentColor);border-radius:var(--et-nav-tabs-underline-radius, 1px);pointer-events:none;opacity:0}.et-nav-tab-link .et-tab-bar-underline--active{opacity:1}[data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size, 2px);transform-origin:left}[data-variant=primary][data-orientation=horizontal] .et-nav-tab-link .et-tab-bar-underline{left:25%;right:25%;height:var(--et-nav-tabs-underline-size, 3px);border-radius:var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0 0}[data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size, 2px);transform-origin:top}[data-variant=primary][data-orientation=vertical] .et-nav-tab-link .et-tab-bar-underline{top:25%;bottom:25%;width:var(--et-nav-tabs-underline-size, 3px);border-radius:0 var(--et-nav-tabs-underline-size, 3px) var(--et-nav-tabs-underline-size, 3px) 0}}\n"] }]
-        }] });
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
 class NavTabsOutletComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabsOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -63938,7 +64507,7 @@ class NavTabsComponent {
     >
       <ng-content />
     </et-scrollable>
-  `, isInline: true, styles: ["@layer components{@property --et-nav-tabs-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-nav-tabs-underline-size{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-nav-tabs-underline-radius{syntax: \"<length>\"; inherits: true; initial-value: 1px;}.et-nav-tabs{display:block;min-inline-size:0;--et-nav-tabs-underline-size: var(--et-tab-underline-size);--et-nav-tabs-underline-radius: var(--et-tab-underline-radius);--et-nav-tabs-font-size: var(--et-tab-font-size)}.et-nav-tabs:where([data-variant=primary][data-size=sm]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=md]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=lg]){--et-nav-tabs-underline-size: 4px}.et-nav-tabs__scrollable{min-inline-size:0}.et-nav-tabs__container{position:relative;gap:var(--et-nav-tabs-gap)}.et-nav-tabs__container:after{content:\"\";position:absolute;background:var(--et-surface-border-solid, currentColor);opacity:var(--et-tab-baseline-opacity);pointer-events:none}[data-divider=false] .et-nav-tabs__container:after{display:none}[data-orientation=horizontal] .et-nav-tabs__container:after{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}[data-orientation=vertical] .et-nav-tabs__container{justify-items:start}[data-orientation=vertical] .et-nav-tabs__container:after{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}}\n"], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableButtonsDirective, selector: "et-scrollable[etScrollableButtons], [etScrollable][etScrollableButtons]", inputs: ["etScrollableButtons"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-nav-tabs-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-nav-tabs-underline-size{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-nav-tabs-underline-radius{syntax: \"<length>\"; inherits: true; initial-value: 1px;}.et-nav-tabs{display:block;min-inline-size:0;--et-nav-tabs-underline-size: var(--et-tab-underline-size);--et-nav-tabs-underline-radius: var(--et-tab-underline-radius);--et-nav-tabs-font-size: var(--et-tab-font-size)}.et-nav-tabs:where([data-variant=primary][data-size=sm]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=md]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=lg]){--et-nav-tabs-underline-size: 4px}.et-nav-tabs__scrollable{min-inline-size:0}.et-nav-tabs__container{position:relative;gap:var(--et-nav-tabs-gap)}.et-nav-tabs__container:after{content:\"\";position:absolute;background:var(--et-surface-border-solid, currentColor);opacity:var(--et-tab-baseline-opacity);pointer-events:none}[data-divider=false] .et-nav-tabs__container:after{display:none}[data-orientation=horizontal] .et-nav-tabs__container:after{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}[data-orientation=vertical] .et-nav-tabs__container{justify-items:start}[data-orientation=vertical][data-fit=fill] .et-nav-tabs__container{justify-items:stretch}[data-orientation=vertical] .et-nav-tabs__container:after{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}}\n"], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableButtonsDirective, selector: "et-scrollable[etScrollableButtons], [etScrollable][etScrollableButtons]", inputs: ["etScrollableButtons"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,
@@ -63976,9 +64545,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-fit]': 'tabBar.fit()',
                         '[attr.data-divider]': 'tabBar.divider()',
                         '[attr.data-variant]': 'tabBar.variant()',
-                    }, styles: ["@layer components{@property --et-nav-tabs-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-nav-tabs-underline-size{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-nav-tabs-underline-radius{syntax: \"<length>\"; inherits: true; initial-value: 1px;}.et-nav-tabs{display:block;min-inline-size:0;--et-nav-tabs-underline-size: var(--et-tab-underline-size);--et-nav-tabs-underline-radius: var(--et-tab-underline-radius);--et-nav-tabs-font-size: var(--et-tab-font-size)}.et-nav-tabs:where([data-variant=primary][data-size=sm]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=md]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=lg]){--et-nav-tabs-underline-size: 4px}.et-nav-tabs__scrollable{min-inline-size:0}.et-nav-tabs__container{position:relative;gap:var(--et-nav-tabs-gap)}.et-nav-tabs__container:after{content:\"\";position:absolute;background:var(--et-surface-border-solid, currentColor);opacity:var(--et-tab-baseline-opacity);pointer-events:none}[data-divider=false] .et-nav-tabs__container:after{display:none}[data-orientation=horizontal] .et-nav-tabs__container:after{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}[data-orientation=vertical] .et-nav-tabs__container{justify-items:start}[data-orientation=vertical] .et-nav-tabs__container:after{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}}\n"] }]
+                    }, styles: ["@layer components{@property --et-nav-tabs-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-nav-tabs-underline-size{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-nav-tabs-underline-radius{syntax: \"<length>\"; inherits: true; initial-value: 1px;}.et-nav-tabs{display:block;min-inline-size:0;--et-nav-tabs-underline-size: var(--et-tab-underline-size);--et-nav-tabs-underline-radius: var(--et-tab-underline-radius);--et-nav-tabs-font-size: var(--et-tab-font-size)}.et-nav-tabs:where([data-variant=primary][data-size=sm]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=md]){--et-nav-tabs-underline-size: 3px}.et-nav-tabs:where([data-variant=primary][data-size=lg]){--et-nav-tabs-underline-size: 4px}.et-nav-tabs__scrollable{min-inline-size:0}.et-nav-tabs__container{position:relative;gap:var(--et-nav-tabs-gap)}.et-nav-tabs__container:after{content:\"\";position:absolute;background:var(--et-surface-border-solid, currentColor);opacity:var(--et-tab-baseline-opacity);pointer-events:none}[data-divider=false] .et-nav-tabs__container:after{display:none}[data-orientation=horizontal] .et-nav-tabs__container:after{bottom:0;left:0;right:0;height:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}[data-orientation=vertical] .et-nav-tabs__container{justify-items:start}[data-orientation=vertical][data-fit=fill] .et-nav-tabs__container{justify-items:stretch}[data-orientation=vertical] .et-nav-tabs__container:after{left:0;top:0;bottom:0;width:var(--et-nav-tabs-underline-size);border-radius:var(--et-nav-tabs-underline-radius)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+/**
+ * A nav tab link that drives an overlay router instead of the Angular router, for tabbed navigation
+ * inside an overlay. Takes the target route as its selector input and otherwise behaves like
+ * `a[et-nav-tab-link]`.
+ *
+ * @example
+ * <et-nav-tabs orientation="vertical">
+ *   <button et-overlay-nav-tab-link="/email">Email</button>
+ * </et-nav-tabs>
+ */
+class OverlayNavTabLinkComponent {
+    constructor() {
+        this.navTabLink = inject(NavTabLinkDirective);
+        this.elementRef = inject(ElementRef);
+        mountNavTabLinkStyles();
+    }
+    handleSpace(event) {
+        event.preventDefault();
+        this.elementRef.nativeElement.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayNavTabLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: OverlayNavTabLinkComponent, isStandalone: true, selector: "button[et-overlay-nav-tab-link]", host: { listeners: { "keydown.space": "handleSpace($event)" }, properties: { "class.et-nav-tab-link--active": "navTabLink.isActive()", "class.et-nav-tab-link--disabled": "navTabLink.trigger.disabled()" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: OverlayRouterLinkDirective, inputs: ["etOverlayRouterLink", "et-overlay-nav-tab-link", "navigationDirection", "navigationDirection"] }, { directive: TabBarTriggerDirective, inputs: ["disabled", "disabled"] }, { directive: NavTabLinkDirective }, { directive: FocusRingDirective }], ngImport: i0, template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`, isInline: true, dependencies: [{ kind: "directive", type: TabBarUnderlineDirective, selector: "[etTabBarUnderline]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayNavTabLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[et-overlay-nav-tab-link]',
+                    template: `<span class="et-nav-tab-link__content"><ng-content /></span><span etTabBarUnderline></span>`,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [TabBarUnderlineDirective],
+                    hostDirectives: [
+                        {
+                            directive: OverlayRouterLinkDirective,
+                            inputs: ['etOverlayRouterLink:et-overlay-nav-tab-link', 'navigationDirection'],
+                        },
+                        {
+                            directive: TabBarTriggerDirective,
+                            inputs: ['disabled'],
+                        },
+                        NavTabLinkDirective,
+                        FocusRingDirective,
+                    ],
+                    host: {
+                        class: 'et-nav-tab-link',
+                        '[class.et-nav-tab-link--active]': 'navTabLink.isActive()',
+                        '[class.et-nav-tab-link--disabled]': 'navTabLink.trigger.disabled()',
+                        '(keydown.space)': 'handleSpace($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 const TAB_GROUP_TOKEN = new InjectionToken('TAB_GROUP_TOKEN');
 const TAB_PANEL_TOKEN = new InjectionToken('TAB_PANEL_TOKEN');
 
@@ -64460,7 +65080,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, styles: ["@layer components{@property --et-tab-group-gap{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --et-tab-group-header-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-tab-group-trigger-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-tab-group-trigger-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-tab-group-underline-size{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-tab-group-underline-radius{syntax: \"<length>\"; inherits: true; initial-value: 1px;}.et-tab-group{display:flex;flex-direction:column;gap:var(--et-tab-group-gap);--et-tab-group-trigger-padding-inline: var(--et-tab-padding-inline);--et-tab-group-trigger-padding-block: var(--et-tab-padding-block);--et-tab-group-underline-size: var(--et-tab-underline-size);--et-tab-group-underline-radius: var(--et-tab-underline-radius);--et-tab-group-font-size: var(--et-tab-font-size)}.et-tab-group[data-orientation=vertical]{flex-direction:row}.et-tab-group:where([data-variant=primary][data-size=sm]){--et-tab-group-underline-size: 3px}.et-tab-group:where([data-variant=primary][data-size=md]){--et-tab-group-underline-size: 3px}.et-tab-group:where([data-variant=primary][data-size=lg]){--et-tab-group-underline-size: 4px}.et-tab-group__header-shell,.et-tab-group__header-scrollable{min-inline-size:0}.et-tab-group__header{position:relative;gap:var(--et-tab-group-header-gap)}.et-tab-group__header:after{content:\"\";position:absolute;background:var(--et-surface-border-solid, currentColor);opacity:var(--et-tab-baseline-opacity);pointer-events:none}[data-divider=false] .et-tab-group__header:after{display:none}[data-orientation=horizontal] .et-tab-group__header:after{bottom:0;left:0;right:0;height:var(--et-tab-group-underline-size);border-radius:var(--et-tab-group-underline-radius)}[data-orientation=vertical] .et-tab-group__header{justify-items:start}[data-orientation=vertical] .et-tab-group__header:after{left:0;top:0;bottom:0;width:var(--et-tab-group-underline-size);border-radius:var(--et-tab-group-underline-radius)}.et-tab-group__trigger{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--et-tab-group-trigger-padding-inline);padding-block:var(--et-tab-group-trigger-padding-block);border:none;background:none;color:var(--et-surface-interaction-solid, inherit);font:inherit;font-size:var(--et-tab-group-font-size);cursor:pointer;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .15s ease,background .15s ease;outline:none;border-radius:.5rem}.et-tab-group__trigger.et-tab-bar-trigger--no-initial-transition{transition:none}@media(hover:hover){.et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):hover{background:rgb(var(--et-color-primary, 0 0 0) / .08)}}.et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):focus-visible{background:rgb(var(--et-color-primary, 0 0 0) / .12)}.et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):active{background:rgb(var(--et-color-primary, 0 0 0) / .16)}.et-tab-group__trigger .et-tab-group__trigger-content{display:flex;align-items:center;gap:8px;border-radius:.5rem;padding:4px 8px;margin:-4px -8px}.et-tab-group__trigger:focus-visible .et-tab-group__trigger-content{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-tab-group__trigger .et-tab-group__trigger-icon{width:1.2em;height:1.2em}[data-variant=primary] .et-tab-group__trigger .et-tab-group__trigger-content{flex-direction:column;gap:4px}.et-tab-group__trigger .et-tab-bar-underline{position:absolute;z-index:1;background:var(--et-theme-color-ink-solid, currentColor);border-radius:var(--et-tab-group-underline-radius);pointer-events:none;opacity:0}.et-tab-group__trigger .et-tab-bar-underline--active{opacity:1}[data-orientation=horizontal] .et-tab-group__trigger .et-tab-bar-underline{bottom:0;left:0;right:0;height:var(--et-tab-group-underline-size);transform-origin:left}[data-variant=primary][data-orientation=horizontal] .et-tab-group__trigger .et-tab-bar-underline{left:25%;right:25%;height:var(--et-tab-group-underline-size);border-radius:var(--et-tab-group-underline-size) var(--et-tab-group-underline-size) 0 0}[data-orientation=vertical] .et-tab-group__trigger .et-tab-bar-underline{left:0;top:0;bottom:0;width:var(--et-tab-group-underline-size);transform-origin:top}[data-variant=primary][data-orientation=vertical] .et-tab-group__trigger .et-tab-bar-underline{top:25%;bottom:25%;width:var(--et-tab-group-underline-size);border-radius:0 var(--et-tab-group-underline-size) var(--et-tab-group-underline-size) 0}.et-tab-group__trigger.et-tab-group__trigger--active{color:var(--et-surface-color-solid, inherit)}.et-tab-group__trigger:disabled{pointer-events:none;cursor:default}.et-tab-group__body{display:grid}.et-tab-group__panel{grid-area:1 / 1}.et-tab-group__panel[hidden]{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
 
-const NAV_TAB_IMPORTS = [NavTabsComponent, NavTabLinkComponent, NavTabsOutletComponent];
+const NAV_TAB_IMPORTS = [
+    NavTabsComponent,
+    NavTabLinkComponent,
+    NavTabsOutletComponent,
+    OverlayNavTabLinkComponent,
+];
 const TAB_IMPORTS = [TabGroupComponent, TabComponent, TabLabelDirective];
 
 /**
@@ -65307,11 +65932,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.47';
+const COMPONENTS_VERSION = '1.0.0-next.48';
 
 /**
  * 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, 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, 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, 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_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 };
 //# sourceMappingURL=ethlete-components.mjs.map