@ethlete/components 1.0.0-next.71 → 1.0.0-next.73

package/fesm2022/ethlete-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, booleanAttribute, signal, inject, ElementRef, computed, effect, untracked, Directive, afterNextRender, DestroyRef, TemplateRef, model, linkedSignal, ViewEncapsulation, Component, ErrorHandler, numberAttribute, contentChildren, HostAttributeToken, Renderer2, output, viewChild, contentChild, NgZone, afterRenderEffect, ApplicationRef, DOCUMENT, ViewContainerRef, runInInjectionContext, createEnvironmentInjector, PLATFORM_ID, reflectComponentType, inputBinding, EnvironmentInjector, isSignal, Injector, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, CSP_NONCE } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { signalElementMutations, RuntimeError, injectHostElement, createComponentId, injectStyleManager, defineLabels, toProvideFn, toInjectFn, toToken, ProvideColorDirective, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSemanticColorTheme, injectColorThemes, injectLocale, defineStaticRootProvider, optionalBooleanAttribute as optionalBooleanAttribute$1, inferMimeType, mountVisuallyHidden, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, injectRootSurfaceTheme, ANIMATED_LIFECYCLE_TOKEN, injectDefaultSurfaceTheme, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, isHTMLElement, injectBreakpointObserver, hasAnchoredOverlayPositionExtras, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, injectUrl, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, injectIsDocumentVisible, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectSurfaceColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, isSafeLinkUrl, markdownToHtml, MARKDOWN_VERBATIM_ATTR, injectHasTouchInput, isSafeUrl, signalHostElementMutations, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createSessionMemory, provideUnsavedChangesConfirm } from '@ethlete/core';
+import { signalElementMutations, RuntimeError, injectHostElement, createComponentId, injectStyleManager, defineLabels, toProvideFn, toInjectFn, toToken, ProvideColorDirective, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSemanticColorTheme, injectColorThemes, injectLocale, defineStaticRootProvider, optionalBooleanAttribute as optionalBooleanAttribute$1, inferMimeType, mountVisuallyHidden, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, injectRootSurfaceTheme, ANIMATED_LIFECYCLE_TOKEN, injectDefaultSurfaceTheme, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, isHTMLElement, injectBreakpointObserver, hasAnchoredOverlayPositionExtras, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, injectUrl, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, injectHasTouchInput, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, injectIsDocumentVisible, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectSurfaceColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, isSafeLinkUrl, markdownToHtml, MARKDOWN_VERBATIM_ATTR, isSafeUrl, signalHostElementMutations, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createSessionMemory, provideUnsavedChangesConfirm } from '@ethlete/core';
 import { NgTemplateOutlet, NgComponentOutlet, isPlatformServer, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { queryStateSignal, isQueryStateLoading, withArgs, createQueryErrorResponse, isQueryStateSuccess, isQueryStateFailure, executeUntilSettled$, extractQuery, createPagedQueryStack, queryComputed, isLegacyQuery, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages } from '@ethlete/query';
 import { DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, COMMON_BRACKET_ROUND_TYPE, BracketRuntimeError, BRACKET_ERROR_CODES, SWISS_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, BRACKET_DATA_LAYOUT, resolveBracketLayout as resolveBracketLayout$1, createBracket, createPlaceholderBracketSource, drawMan, createDoubleEliminationGrid, ɵcreateStackedDoubleEliminationGrid as _createStackedDoubleEliminationGrid, createSingleEliminationGrid, generateBracketRoundSwissGroupMaps, createSwissGrid, drawSwissMan, standingPickStartOrder } from '@ethlete/bracket';
 export { BRACKET_DATA_LAYOUT, BRACKET_ERROR_CODES, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BracketMap, BracketRuntimeError, COMMON_BRACKET_ROUND_TYPE, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, GROUP_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SWISS_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, bracketSlot, createBracket, createPlaceholderBracketSource, isBracketSlotPredictable, migrateBracketPicks, resolveBracketSlot, standingRankSides, swapStandingRank, validateBracketSource } from '@ethlete/bracket';
 import { isValid, format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, setYear, parse, setSeconds, setMinutes, setHours, subDays, subWeeks, subMonths, endOfDay, setMilliseconds, differenceInCalendarDays, getDaysInMonth, eachDayOfInterval, addHours } from 'date-fns';
-import { tap, Subject, take, filter, defer, map, finalize, timer, takeUntil, fromEvent, switchMap, observeOn, asapScheduler, combineLatest, distinctUntilChanged, EMPTY, startWith, debounceTime, merge, catchError, of, delay, isObservable, from, share, scan, concat, firstValueFrom, defaultIfEmpty, Subscription, Observable, interval, ignoreElements, skip, animationFrameScheduler, EmptyError, exhaustMap, shareReplay, throwError, expand, toArray, takeWhile, mergeMap } from 'rxjs';
+import { tap, Subject, take, filter, defer, map, finalize, Observable, merge, fromEvent, EMPTY, ignoreElements, timer, takeUntil, interval, switchMap, observeOn, asapScheduler, combineLatest, distinctUntilChanged, startWith, debounceTime, catchError, of, delay, isObservable, from, share, scan, concat, firstValueFrom, defaultIfEmpty, Subscription, skip, animationFrameScheduler, EmptyError, exhaustMap, shareReplay, throwError, expand, toArray, takeWhile, mergeMap } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/router';
 import { ROUTES, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, NavigationSkipped, RouterLink, ActivatedRoute, RouterLinkActive } from '@angular/router';
@@ -1759,7 +1759,7 @@ class AccordionComponent {
         ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-accordion" }, providers: [provideIcons(CHEVRON_ICON)], hostDirectives: [{ directive: AccordionDirective, inputs: ["isOpen", "isOpen", "isOpenByDefault", "isOpenByDefault", "disabled", "disabled"], outputs: ["isOpenChange", "isOpenChange"] }], ngImport: i0, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"], dependencies: [{ kind: "directive", type: AccordionPanelDirective, selector: "[etAccordionPanel]", exportAs: ["etAccordionPanel"] }, { kind: "directive", type: AccordionTriggerDirective, selector: "[etAccordionTrigger]", exportAs: ["etAccordionTrigger"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-accordion" }, providers: [provideIcons(CHEVRON_ICON)], hostDirectives: [{ directive: AccordionDirective, inputs: ["isOpen", "isOpen", "isOpenByDefault", "isOpenByDefault", "disabled", "disabled"], outputs: ["isOpenChange", "isOpenChange"] }], ngImport: i0, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"], dependencies: [{ kind: "directive", type: AccordionPanelDirective, selector: "[etAccordionPanel]", exportAs: ["etAccordionPanel"] }, { kind: "directive", type: AccordionTriggerDirective, selector: "[etAccordionTrigger]", exportAs: ["etAccordionTrigger"] }, { 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.1.6", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -1771,7 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-accordion',
-                    }, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"] }]
+                    }, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
 
 /** The accordion, its group, the slot templates, and the headless directives to build your own. */
@@ -2035,7 +2035,7 @@ class BadgeComponent {
       </div>
     }
 
-    <ng-content />
+    <span class="et-badge-label"><ng-content /></span>
 
     @if (iconAlignment() === 'end') {
       <div class="et-badge-icon">
@@ -2046,7 +2046,7 @@ class BadgeComponent {
     <ng-template #iconTpl>
       <ng-content select="[etIcon]" />
     </ng-template>
-  `, isInline: true, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-label{text-box:trim-both cap alphabetic}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -2057,7 +2057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       </div>
     }
 
-    <ng-content />
+    <span class="et-badge-label"><ng-content /></span>
 
     @if (iconAlignment() === 'end') {
       <div class="et-badge-icon">
@@ -2078,7 +2078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-size]': 'size()',
                         '[attr.data-icon-alignment]': 'iconAlignment()',
-                    }, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"] }]
+                    }, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-label{text-box:trim-both cap alphabetic}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlignment", required: false }] }] } });
 
 const BADGE_IMPORTS = [BadgeComponent];
@@ -2434,21 +2434,23 @@ class SpinnerComponent {
         />
       </svg>
     } @else {
-      <div class="et-spinner-indeterminate-container" aria-hidden="true">
-        <div class="et-spinner-layer">
-          <div class="et-spinner-circle-clipper et-spinner-circle-left">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-gap-patch">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-circle-clipper et-spinner-circle-right">
-            <ng-container [ngTemplateOutlet]="circle" />
+      <div class="et-spinner-indeterminate" animate.leave="et-spinner-indeterminate--leave">
+        <div class="et-spinner-indeterminate-container" aria-hidden="true">
+          <div class="et-spinner-layer">
+            <div class="et-spinner-circle-clipper et-spinner-circle-left">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-gap-patch">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-circle-clipper et-spinner-circle-right">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
           </div>
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate--leave{opacity:0;transition:opacity .15s ease}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{transition:opacity .15s ease}@starting-style{.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{opacity:0}}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -2510,16 +2512,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         />
       </svg>
     } @else {
-      <div class="et-spinner-indeterminate-container" aria-hidden="true">
-        <div class="et-spinner-layer">
-          <div class="et-spinner-circle-clipper et-spinner-circle-left">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-gap-patch">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-circle-clipper et-spinner-circle-right">
-            <ng-container [ngTemplateOutlet]="circle" />
+      <div class="et-spinner-indeterminate" animate.leave="et-spinner-indeterminate--leave">
+        <div class="et-spinner-indeterminate-container" aria-hidden="true">
+          <div class="et-spinner-layer">
+            <div class="et-spinner-circle-clipper et-spinner-circle-left">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-gap-patch">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-circle-clipper et-spinner-circle-right">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
           </div>
         </div>
       </div>
@@ -2540,7 +2544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-valuenow]': 'determinate() ? clampedValue() : null',
                         '[attr.aria-valuemin]': 'determinate() ? 0 : null',
                         '[attr.aria-valuemax]': 'determinate() ? 100 : null',
-                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
+                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate--leave{opacity:0;transition:opacity .15s ease}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{transition:opacity .15s ease}@starting-style{.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{opacity:0}}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
         }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 const LOADER_IMPORTS = [SpinnerComponent, ProgressBarComponent];
@@ -2774,8 +2778,17 @@ class QueryButtonDirective {
         this.query = input.required({ ...(ngDevMode ? { debugName: "query" } : /* istanbul ignore next */ {}), alias: 'etQueryButton' });
         /** Whether the spinner shows the query's progress percentage when it reports one. */
         this.showProgress = input(true, { ...(ngDevMode ? { debugName: "showProgress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.state = computed(() => readQueryButtonSource(this.query()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        // Never falls back within one run: after the upload, a download restarts at 0 or reports no length.
+        this.state = linkedSignal({ ...(ngDevMode ? { debugName: "state" } : /* istanbul ignore next */ {}), source: () => readQueryButtonSource(this.query()),
+            computation: (state, previous) => {
+                if (!state.loading)
+                    return IDLE_STATE;
+                const reported = state.progress !== null && Number.isFinite(state.progress) ? state.progress : null;
+                const held = previous?.value.loading ? previous.value.progress : null;
+                if (held === null || reported === null)
+                    return { loading: true, progress: reported ?? held };
+                return { loading: true, progress: Math.max(held, reported) };
+            } });
         this.loading = computed(() => this.state().loading, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.progress = computed(() => (this.showProgress() ? this.state().progress : null), /* @ts-ignore */
@@ -2896,6 +2909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const MENU_TRIGGER_ROOT_ALIGNMENT = new InjectionToken('MENU_TRIGGER_ROOT_ALIGNMENT');
+
 class SplitButtonTriggerDirective {
     constructor() {
         this.splitButton = inject(SplitButtonDirective, { optional: true });
@@ -2910,13 +2925,14 @@ class SplitButtonTriggerDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonTriggerDirective, isStandalone: true, selector: "[etSplitButtonTrigger]", host: { classAttribute: "et-split-button-trigger" }, exportAs: ["etSplitButtonTrigger"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonTriggerDirective, isStandalone: true, selector: "[etSplitButtonTrigger]", host: { classAttribute: "et-split-button-trigger" }, providers: [{ provide: MENU_TRIGGER_ROOT_ALIGNMENT, useValue: 'end' }], exportAs: ["etSplitButtonTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etSplitButtonTrigger]',
                     exportAs: 'etSplitButtonTrigger',
+                    providers: [{ provide: MENU_TRIGGER_ROOT_ALIGNMENT, useValue: 'end' }],
                     host: {
                         class: 'et-split-button-trigger',
                     },
@@ -6816,13 +6832,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 class SplitButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}.et-split-button .et-split-button-trigger[aria-expanded=true]{--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));z-index:1}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=filled]){--et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta))}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=outline],[data-variant=transparent]){--et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta)}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=tonal]){--et-theme-color-primary-opacity: calc(.16 + var(--et-button-variant-opacity-hover-delta))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-split-button', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, hostDirectives: [SplitButtonDirective], host: {
                         class: 'et-split-button',
-                    }, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"] }]
+                    }, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}.et-split-button .et-split-button-trigger[aria-expanded=true]{--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));z-index:1}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=filled]){--et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta))}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=outline],[data-variant=transparent]){--et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta)}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=tonal]){--et-theme-color-primary-opacity: calc(.16 + var(--et-button-variant-opacity-hover-delta))}}\n"] }]
         }] });
 
 class TextButtonComponent {
@@ -9215,6 +9231,110 @@ const anchoredDialogOverlayStrategy = (options = {}) => {
     };
 };
 
+/**
+ * Tracks the gap between where `position: fixed; bottom: 0` renders and the top of the soft
+ * keyboard. Never emits; subscribing starts the tracking and unsubscribing stops it.
+ */
+const observeKeyboardInset = (tracking) => new Observable((subscriber) => {
+    const viewport = tracking.view.visualViewport;
+    if (!viewport)
+        return;
+    return trackKeyboardInset(tracking, viewport).subscribe(subscriber);
+});
+const trackKeyboardInset = ({ view, renderer, onInset, poll$ = EMPTY }, viewport) => {
+    // In a same-origin iframe (Storybook, docs story embeds) the frame's own visualViewport never
+    // reflects the soft keyboard - only the top window's does. Track the top viewport plus the
+    // frame's position to compute how much of THIS frame the keyboard covers. A cross-origin
+    // parent exposes neither (`frameElement` is null / viewport access throws), so those frames
+    // keep the local metrics - the status quo of not seeing the keyboard at all.
+    let frameElement = null;
+    let topViewport = null;
+    try {
+        // no instanceof here - frameElement belongs to the PARENT document's realm, so it is never
+        // an instance of this window's HTMLElement constructor
+        frameElement = view.frameElement;
+        topViewport = frameElement ? (view.top?.visualViewport ?? null) : null;
+    }
+    catch {
+        frameElement = null;
+        topViewport = null;
+    }
+    // Where "position: fixed; bottom: 0" actually lands is NOT derivable from window/visualViewport
+    // on iOS: with the soft keyboard open (and focus zoom active), WebKit positions fixed elements
+    // against an internal rect that tracks the visual viewport and is clamped to the document - its
+    // bottom sits well below where `innerHeight` says. Measure it with a zero-size fixed probe
+    // instead of assuming layout-viewport math; on engines without the quirk the probe bottom IS
+    // `innerHeight`, so this degenerates to the plain `innerHeight - height - offsetTop`.
+    const probe = renderer.createElement('div');
+    renderer.setCssProperties(probe, {
+        position: 'fixed',
+        'inset-block-end': '0',
+        'inline-size': '0',
+        'block-size': '0',
+        visibility: 'hidden',
+    });
+    renderer.appendChild(view.document.body, probe);
+    let lastApplied = -1;
+    const apply = () => {
+        const fixedBottom = probe.getBoundingClientRect().bottom;
+        let keyboardTop;
+        if (frameElement && topViewport) {
+            const covered = frameElement.getBoundingClientRect().bottom - (topViewport.offsetTop + topViewport.height);
+            keyboardTop = view.innerHeight - Math.max(0, covered);
+        }
+        else {
+            keyboardTop = viewport.offsetTop + viewport.height;
+        }
+        const inset = Math.max(0, fixedBottom - keyboardTop);
+        if (inset === lastApplied)
+            return false;
+        lastApplied = inset;
+        onInset(inset);
+        return true;
+    };
+    // iOS moves its fixed-position rect ASYNCHRONOUSLY while scrolling with the keyboard open (and
+    // fires few or no visualViewport events mid-scroll, including when the scroll itself dismisses
+    // the keyboard) - a single synchronous re-measure per event reads a stale probe rect. So each
+    // event kicks a rAF loop that keeps re-measuring until the inset has been stable for a few
+    // frames, then stops - continuous tracking while anything moves, zero per-frame work at rest.
+    let rafId = null;
+    let quietFrames = 0;
+    const settle = () => {
+        quietFrames = apply() ? 0 : quietFrames + 1;
+        // ~30 quiet frames (≈500ms) so the loop outlasts the keyboard show/hide animation - iOS can
+        // fire its last viewport event right at the animation's start while the fixed-position rect
+        // keeps moving until the end
+        rafId = quietFrames < 30 ? view.requestAnimationFrame(settle) : null;
+    };
+    const kick = () => {
+        quietFrames = 0;
+        apply();
+        rafId ??= view.requestAnimationFrame(settle);
+    };
+    kick();
+    const viewports = topViewport ? [viewport, topViewport] : [viewport];
+    // window scroll too: a root scroll pans the keyboard-tracking fixed rect without necessarily
+    // firing any visualViewport event (top window as well when embedded in an iframe)
+    const scrollTargets = [...viewports, view];
+    try {
+        if (frameElement && view.top)
+            scrollTargets.push(view.top);
+    }
+    catch {
+        // cross-origin top - its scrolls are invisible to us; the frame keeps local tracking
+    }
+    const viewportChange$ = merge(...viewports.map((v) => fromEvent(v, 'resize')), 
+    // These are ancestor viewports/windows (visualViewport, iframe top), not a component-owned
+    // scroll container - signalElementScrollState targets a known elementRef and doesn't apply.
+    // eslint-disable-next-line ethlete/prefer-scroll-state
+    ...scrollTargets.map((t) => fromEvent(t, 'scroll', { passive: true }))).pipe(tap(() => kick()));
+    return merge(poll$.pipe(tap(() => apply())), viewportChange$).pipe(ignoreElements(), finalize(() => {
+        if (rafId !== null)
+            view.cancelAnimationFrame(rafId);
+        probe.remove();
+    }));
+};
+
 /** Elements whose own pointer handling wins over a drag gesture on an ancestor. */
 const isInteractivePointerTarget = (target) => {
     const tag = target.tagName.toLowerCase();
@@ -9568,6 +9688,8 @@ const MIN_LEAVE_DURATION_MS = 100;
 const MAX_LEAVE_DURATION_MS = 350;
 /** Below this release speed the swipe carries no momentum worth handing off. */
 const MIN_LEAVE_SPEED = 50;
+/** How often a sheet lifted above the soft keyboard re-checks the keyboard, to recover a missed viewport event. */
+const KEYBOARD_POLL_MS = 500;
 /**
  * Gives the leave transition the speed the swipe had when it let go, instead of the fixed duration
  * the stylesheet uses for every other close. Only the duration is overridden - position is already
@@ -9581,9 +9703,40 @@ const applyDismissMomentum = ({ el, momentum }, renderer) => {
     renderer.setStyle(el, { transitionDuration: `${duration}ms` });
 };
 /** Shared strategy shape for all sheet variants: default enter/leave animations plus drag-to-dismiss. */
-const createSheetStrategy = (config, renderer) => {
+const createSheetStrategy = (config, { renderer, liftAboveKeyboard }) => {
     let dragToDismissRef;
     let dismissMomentum = null;
+    let keyboardLift;
+    const applyKeyboardLift = (pane, inset) => renderer.setCssProperties(pane, {
+        'margin-block-end': inset ? `${inset}px` : null,
+        '--et-overlay-max-height': inset ? `calc(100% - ${inset}px)` : null,
+    });
+    const stopKeyboardLift = (context) => {
+        if (!keyboardLift)
+            return;
+        keyboardLift.unsubscribe();
+        keyboardLift = undefined;
+        applyKeyboardLift(context.containerEl, 0);
+    };
+    const startKeyboardLift = (context) => {
+        stopKeyboardLift(context);
+        const view = context.containerEl.ownerDocument.defaultView;
+        if (!view || !liftAboveKeyboard?.())
+            return;
+        let inset = 0;
+        const lift = () => applyKeyboardLift(context.containerEl, inset);
+        keyboardLift = observeKeyboardInset({
+            view,
+            renderer,
+            onInset: (next) => {
+                inset = next;
+                lift();
+            },
+            // re-asserts the lift too: a strategy switch re-positions the pane after onSwitchedTo, which
+            // clears `--et-overlay-max-height`
+            poll$: interval(KEYBOARD_POLL_MS).pipe(tap(lift)),
+        }).subscribe();
+    };
     const attachDragToDismiss = (context) => {
         if (!config.dragToDismiss)
             return;
@@ -9607,11 +9760,18 @@ const createSheetStrategy = (config, renderer) => {
             // A close interrupted by a re-open must not inherit the previous swipe's duration.
             renderer.setStyle(context.containerEl, { transitionDuration: null });
             dismissMomentum = null;
+            startKeyboardLift(context);
             context.lifecycle.enter();
         },
         onAfterEnter: (context) => attachDragToDismiss(context),
-        onSwitchedTo: attachDragToDismiss,
-        onSwitchedAwayFrom: detachDragToDismiss,
+        onSwitchedTo: (context) => {
+            attachDragToDismiss(context);
+            startKeyboardLift(context);
+        },
+        onSwitchedAwayFrom: (context) => {
+            detachDragToDismiss();
+            stopKeyboardLift(context);
+        },
         onBeforeLeave: (context) => {
             detachDragToDismiss();
             if (dismissMomentum) {
@@ -9620,6 +9780,7 @@ const createSheetStrategy = (config, renderer) => {
             }
             context.lifecycle.leave();
         },
+        onAfterLeave: stopKeyboardLift,
     };
 };
 
@@ -9658,7 +9819,11 @@ const injectBottomSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(BOTTOM_SHEE
 const BOTTOM_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectBottomSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const hasTouchInput = injectHasTouchInput();
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), {
+        renderer,
+        liftAboveKeyboard: hasTouchInput,
+    });
     return {
         build,
     };
@@ -10350,7 +10515,7 @@ const injectLeftSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(LEFT_SHEET_ST
 const LEFT_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectLeftSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -10388,7 +10553,7 @@ const injectRightSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(RIGHT_SHEET_
 const RIGHT_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectRightSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -10472,7 +10637,7 @@ const injectTopSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(TOP_SHEET_STRA
 const TOP_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectTopSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -15764,11 +15929,11 @@ const SCROLLABLE_DARKEN_IMPORTS = [ScrollableDarkenDirective];
 
 class CarouselAutoplayStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: CarouselAutoplayStylesComponent, isStandalone: true, selector: "et-carousel-autoplay-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg}to{rotate:0deg}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: CarouselAutoplayStylesComponent, isStandalone: true, selector: "et-carousel-autoplay-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg;opacity:0}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg;opacity:1}to{rotate:0deg;opacity:1}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-carousel-autoplay-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg}to{rotate:0deg}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"] }]
+            args: [{ selector: 'et-carousel-autoplay-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg;opacity:0}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg;opacity:1}to{rotate:0deg;opacity:1}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"] }]
         }] });
 
 const CAROUSEL_TOKEN = new InjectionToken('CAROUSEL_TOKEN');
@@ -15779,8 +15944,8 @@ const MAX_TIMER_DELAY = 2_147_483_647;
  * Advances the carousel on its own. Opt-in - put it on the same element as `[etCarousel]` - so a carousel
  * that doesn't move by itself carries none of this.
  *
- * It pauses whenever moving the page under the user would be rude: pointer over the carousel, focus
- * inside it, the carousel scrolled off screen, or the user having asked for reduced motion (in which case
+ * It pauses whenever moving the page under the user would be rude: a finger or the pointer on the
+ * carousel, focus inside it, the carousel scrolled off screen, or the user having asked for reduced motion (in which case
  * it never starts at all). It also stops at the last slide when the carousel doesn't `loop`, rather than
  * jumping back to the start forever.
  *
@@ -15844,6 +16009,9 @@ class CarouselAutoplayDirective {
         this.isHovered = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
         /** @internal */
+        this.isTouched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+        /** @internal */
         this.isFocusWithin = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFocusWithin" }] : /* istanbul ignore next */ []));
         /**
@@ -15885,6 +16053,8 @@ class CarouselAutoplayDirective {
                 if (!isOnScreen)
                     return 'off-screen';
             }
+            if (this.isTouched())
+                return 'touch';
             if (this.pauseOnHover() && this.isHovered() && !this.isPointerOnPauseControl())
                 return 'hover';
             if (this.pauseOnFocus() && this.isFocusWithin() && !this.isFocusOnPauseControl())
@@ -15950,6 +16120,9 @@ class CarouselAutoplayDirective {
             return;
         this.isHovered.set(isHovered);
     }
+    setTouched(event) {
+        this.isTouched.set(event.touches.length > 0);
+    }
     advance() {
         const carousel = this.carousel;
         if (!carousel)
@@ -15961,7 +16134,7 @@ class CarouselAutoplayDirective {
         carousel.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CarouselAutoplayDirective, isStandalone: true, selector: "[etCarouselAutoplay]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, autoplayTime: { classPropertyName: "autoplayTime", publicName: "autoplayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, pauseOnOffScreen: { classPropertyName: "pauseOnOffScreen", publicName: "pauseOnOffScreen", isSignal: true, isRequired: false, transformFunction: null }, playOnInit: { classPropertyName: "playOnInit", publicName: "playOnInit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "setHovered($event, true)", "pointerleave": "setHovered($event, false)", "focusin": "isFocusWithin.set(true)", "focusout": "isFocusWithin.set(false)" }, properties: { "attr.data-autoplaying": "isPlaying() ? \"\" : null" } }, providers: [{ provide: CAROUSEL_AUTOPLAY_TOKEN, useExisting: CarouselAutoplayDirective }], exportAs: ["etCarouselAutoplay"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CarouselAutoplayDirective, isStandalone: true, selector: "[etCarouselAutoplay]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, autoplayTime: { classPropertyName: "autoplayTime", publicName: "autoplayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, pauseOnOffScreen: { classPropertyName: "pauseOnOffScreen", publicName: "pauseOnOffScreen", isSignal: true, isRequired: false, transformFunction: null }, playOnInit: { classPropertyName: "playOnInit", publicName: "playOnInit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "setHovered($event, true)", "pointerleave": "setHovered($event, false)", "touchstart": "isTouched.set(true)", "touchend": "setTouched($event)", "touchcancel": "setTouched($event)", "focusin": "isFocusWithin.set(true)", "focusout": "isFocusWithin.set(false)" }, properties: { "attr.data-autoplaying": "isPlaying() ? \"\" : null" } }, providers: [{ provide: CAROUSEL_AUTOPLAY_TOKEN, useExisting: CarouselAutoplayDirective }], exportAs: ["etCarouselAutoplay"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayDirective, decorators: [{
             type: Directive,
@@ -15973,6 +16146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-autoplaying]': 'isPlaying() ? "" : null',
                         '(pointerenter)': 'setHovered($event, true)',
                         '(pointerleave)': 'setHovered($event, false)',
+                        '(touchstart)': 'isTouched.set(true)',
+                        '(touchend)': 'setTouched($event)',
+                        '(touchcancel)': 'setTouched($event)',
                         '(focusin)': 'isFocusWithin.set(true)',
                         '(focusout)': 'isFocusWithin.set(false)',
                     },
@@ -17220,7 +17396,7 @@ class CarouselComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CarouselComponent, isStandalone: true, selector: "et-carousel", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-carousel--can-animate": "canAnimate.state()" }, classAttribute: "et-carousel" }, providers: [provideIcons(CHEVRON_ICON, PLAY_ICON, PAUSE_ICON)], viewQueries: [{ propertyName: "track", first: true, predicate: ScrollableComponent, descendants: true, read: ScrollableDirective, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "labels", "labels", "slideAlign", "slideAlign", "transition", "transition", "transitionDriver", "transitionDriver", "activeIndex", "activeIndex"], outputs: ["activeIndexChange", "activeIndexChange"] }, { directive: CarouselAutoplayDirective, inputs: ["autoplayTime", "autoplayTime", "pauseOnHover", "pauseOnHover", "pauseOnFocus", "pauseOnFocus", "pauseOnOffScreen", "pauseOnOffScreen", "playOnInit", "playOnInit"] }], ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: CarouselItemDirective, selector: "[etCarouselItem]", inputs: ["autoplayTime", "isClone"], exportAs: ["etCarouselItem"] }, { kind: "directive", type: CarouselNextDirective, selector: "[etCarouselNext]", exportAs: ["etCarouselNext"] }, { kind: "directive", type: CarouselPlayToggleDirective, selector: "[etCarouselPlayToggle]", exportAs: ["etCarouselPlayToggle"] }, { kind: "directive", type: CarouselPreviousDirective, selector: "[etCarouselPrevious]", exportAs: ["etCarouselPrevious"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["focusRingDisabled"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["etScrollableDrag"] }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["etScrollableSnap", "snapOrigin"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CarouselComponent, isStandalone: true, selector: "et-carousel", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-carousel--can-animate": "canAnimate.state()" }, classAttribute: "et-carousel" }, providers: [provideIcons(CHEVRON_ICON, PLAY_ICON, PAUSE_ICON)], viewQueries: [{ propertyName: "track", first: true, predicate: ScrollableComponent, descendants: true, read: ScrollableDirective, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "labels", "labels", "slideAlign", "slideAlign", "transition", "transition", "transitionDriver", "transitionDriver", "activeIndex", "activeIndex"], outputs: ["activeIndexChange", "activeIndexChange"] }, { directive: CarouselAutoplayDirective, inputs: ["autoplayTime", "autoplayTime", "pauseOnHover", "pauseOnHover", "pauseOnFocus", "pauseOnFocus", "pauseOnOffScreen", "pauseOnOffScreen", "playOnInit", "playOnInit"] }], ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-slide-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel-track .et-scrollable-container{gap:var(--et-carousel-slide-gap)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: CarouselItemDirective, selector: "[etCarouselItem]", inputs: ["autoplayTime", "isClone"], exportAs: ["etCarouselItem"] }, { kind: "directive", type: CarouselNextDirective, selector: "[etCarouselNext]", exportAs: ["etCarouselNext"] }, { kind: "directive", type: CarouselPlayToggleDirective, selector: "[etCarouselPlayToggle]", exportAs: ["etCarouselPlayToggle"] }, { kind: "directive", type: CarouselPreviousDirective, selector: "[etCarouselPrevious]", exportAs: ["etCarouselPrevious"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["focusRingDisabled"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["etScrollableDrag"] }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["etScrollableSnap", "snapOrigin"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
@@ -17248,7 +17424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], host: {
                         class: 'et-carousel',
                         '[class.et-carousel--can-animate]': 'canAnimate.state()',
-                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"] }]
+                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-slide-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel-track .et-scrollable-container{gap:var(--et-carousel-slide-gap)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], track: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollableComponent), { ...{ read: ScrollableDirective }, isSignal: true }] }] } });
 
 /** The carousel, its slide template, and the headless directives to build your own out of a scrollable. */
@@ -21059,7 +21235,7 @@ class ChipComponent {
         this.labelId = createChipLabelId();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChipComponent, isStandalone: true, selector: "et-chip", host: { classAttribute: "et-chip" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: ChipDirective, inputs: ["disabled", "disabled", "removable", "removable"], outputs: ["remove", "remove"] }], ngImport: i0, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"], dependencies: [{ kind: "directive", type: ChipRemoveDirective, selector: "[etChipRemove]", inputs: ["removeLabel"], exportAs: ["etChipRemove"] }, { 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.1.6", type: ChipComponent, isStandalone: true, selector: "et-chip", host: { classAttribute: "et-chip" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: ChipDirective, inputs: ["disabled", "disabled", "removable", "removable"], outputs: ["remove", "remove"] }], ngImport: i0, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:clip;overflow-clip-margin:.3em;text-overflow:ellipsis;text-box:trim-both cap alphabetic;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"], dependencies: [{ kind: "directive", type: ChipRemoveDirective, selector: "[etChipRemove]", inputs: ["removeLabel"], exportAs: ["etChipRemove"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
@@ -21071,7 +21247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-chip',
-                    }, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"] }]
+                    }, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:clip;overflow-clip-margin:.3em;text-overflow:ellipsis;text-box:trim-both cap alphabetic;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"] }]
         }] });
 
 const CHIP_IMPORTS = [ChipComponent, ChipDirective, ChipRemoveDirective];
@@ -22988,7 +23164,24 @@ class FloatingActionDirective {
      */
     scrollToTop(options) {
         const target = this.top()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
-        target.scrollIntoView(options ?? { behavior: 'smooth', block: 'start' });
+        const { behavior = 'smooth', block = 'start' } = options ?? {};
+        const container = findScrollContainer(target);
+        const isDocument = container === target.ownerDocument.scrollingElement || container === target.ownerDocument.documentElement;
+        const containerTop = isDocument ? 0 : container.getBoundingClientRect().top + container.clientTop;
+        const viewport = container.clientHeight;
+        const { top: targetTop, height } = target.getBoundingClientRect();
+        const start = targetTop - containerTop + container.scrollTop;
+        const offsets = {
+            start,
+            center: start - (viewport - height) / 2,
+            end: start - (viewport - height),
+            nearest: targetTop < containerTop
+                ? start
+                : targetTop + height > containerTop + viewport
+                    ? start - (viewport - height)
+                    : container.scrollTop,
+        };
+        container.scrollTo({ top: Math.max(0, offsets[block]), behavior });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FloatingActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: FloatingActionDirective, isStandalone: true, selector: "[etFloatingAction]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()" }, classAttribute: "et-floating-action" }, providers: [{ provide: FLOATING_ACTION_TOKEN, useExisting: FloatingActionDirective }], exportAs: ["etFloatingAction"], ngImport: i0 }); }
@@ -23005,6 +23198,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+const findScrollContainer = (target) => {
+    for (let el = target.parentElement; el; el = el.parentElement) {
+        const { overflowY } = getComputedStyle(el);
+        if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+            el.scrollHeight > el.clientHeight) {
+            return el;
+        }
+    }
+    return target.ownerDocument.scrollingElement ?? target.ownerDocument.documentElement;
+};
 
 const FLOATING_ACTION_IMPORTS = [
     FloatingActionDirective,
@@ -27984,7 +28187,7 @@ class FormFieldComponent {
         this.formFieldDir.activate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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": "support.displaysError() || null", "attr.data-warning": "support.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" }, providers: [provideFormSupport()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], 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: nothing may come between a control's own affordances and\n       the field they belong to. -->\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. -->\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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.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      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.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-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;}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, var(--_et-form-field-control-border-radius, 4px));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}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}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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": "support.displaysError() || null", "attr.data-warning": "support.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" }, providers: [provideFormSupport()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], 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: nothing may come between a control's own affordances and\n       the field they belong to. -->\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. -->\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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.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      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.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-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;}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, var(--_et-form-field-control-border-radius, 4px));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}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}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}@media(pointer:coarse){et-form-field :is(input:not([type=checkbox],[type=radio],[type=range]),textarea){font-size:max(1em,16px)}}}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -28024,7 +28227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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: nothing may come between a control's own affordances and\n       the field they belong to. -->\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. -->\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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.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      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.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-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;}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, var(--_et-form-field-control-border-radius, 4px));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}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}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\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: nothing may come between a control's own affordances and\n       the field they belong to. -->\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. -->\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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.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      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.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-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;}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, var(--_et-form-field-control-border-radius, 4px));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}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}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}@media(pointer:coarse){et-form-field :is(input:not([type=checkbox],[type=radio],[type=range]),textarea){font-size:max(1em,16px)}}}\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 }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DescriptionComponent), { ...{ descendants: false }, isSignal: true }] }] } });
 
 const INPUT_MASK_HOST = new InjectionToken('INPUT_MASK_HOST');
@@ -42107,6 +42310,9 @@ class MenuDirective {
         this.depth = (this.parent?.depth ?? -1) + 1;
         this.isRoot = this.parent === null;
         /** @internal */
+        this.rootAlignment = signal('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootAlignment" }] : /* istanbul ignore next */ []));
+        /** @internal */
         this.registeredTrigger = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registeredTrigger" }] : /* istanbul ignore next */ []));
         /** @internal */
@@ -42738,7 +42944,7 @@ class MenuDirective {
             return placement;
         }
         if (this.isRoot && !this.anchorPoint()) {
-            return 'bottom-start';
+            return `bottom-${this.rootAlignment()}`;
         }
         return `${this.inlineEndSide()}-start`;
     }
@@ -42748,7 +42954,9 @@ class MenuDirective {
             return fallbackPlacements;
         }
         if (this.isRoot && !this.anchorPoint()) {
-            return ['bottom-end', 'top-start', 'top-end'];
+            return this.rootAlignment() === 'end'
+                ? ['bottom-start', 'top-end', 'top-start']
+                : ['bottom-end', 'top-start', 'top-end'];
         }
         const end = this.inlineEndSide();
         const start = end === 'right' ? 'left' : 'right';
@@ -42905,12 +43113,16 @@ class MenuTriggerDirective {
         this.menu = inject(MenuDirective, { optional: true });
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
+        this.rootAlignment = inject(MENU_TRIGGER_ROOT_ALIGNMENT, { optional: true, self: true });
         /** @internal The same-element menu item this trigger is combined with, if any. Set by the item. */
         this.hostItem = null;
         const element = this.elementRef.nativeElement;
         if (!element.id) {
             element.id = createComponentId('et-menu-trigger');
         }
+        if (this.rootAlignment) {
+            this.menu?.rootAlignment.set(this.rootAlignment);
+        }
         this.menu?.registeredTrigger.set(this);
         this.destroyRef.onDestroy(() => {
             this.menu?.unregisterTrigger(this);
@@ -46721,121 +46933,21 @@ class RichTextEditorComponent {
             .subscribe();
     }
     /**
-     * Keeps `--_et-rte-keyboard-inset` at the gap between where `position: fixed; bottom: 0` renders
-     * and the top of the soft keyboard, so the docked toolbar sits on the keyboard. Written straight to
-     * the host, not through a signal, so scrolling never schedules change detection.
+     * Keeps `--_et-rte-keyboard-inset` at the soft keyboard's inset, so the docked toolbar sits on the
+     * keyboard. Written straight to the host, not through a signal, so scrolling never schedules change
+     * detection.
      */
     keyboardInset$() {
-        return new Observable((subscriber) => {
-            const view = this.document.defaultView;
-            const viewport = view?.visualViewport;
-            if (!view || !viewport)
-                return;
-            return this.observeKeyboardInset(view, viewport).subscribe(subscriber);
-        });
-    }
-    observeKeyboardInset(view, viewport) {
+        const view = this.document.defaultView;
+        if (!view)
+            return EMPTY;
         const host = this.host.nativeElement;
-        // In a same-origin iframe (Storybook, docs story embeds) the frame's own visualViewport never
-        // reflects the soft keyboard - only the top window's does. Track the top viewport plus the
-        // frame's position to compute how much of THIS frame the keyboard covers. A cross-origin
-        // parent exposes neither (`frameElement` is null / viewport access throws), so those frames
-        // keep the local metrics - the status quo of not seeing the keyboard at all.
-        let frameElement = null;
-        let topViewport = null;
-        try {
-            // no instanceof here - frameElement belongs to the PARENT document's realm, so it is never
-            // an instance of this window's HTMLElement constructor
-            frameElement = view.frameElement;
-            topViewport = frameElement ? (view.top?.visualViewport ?? null) : null;
-        }
-        catch {
-            frameElement = null;
-            topViewport = null;
-        }
-        // Where "position: fixed; bottom: 0" actually lands is NOT derivable from window/visualViewport
-        // on iOS: with the soft keyboard open (and focus zoom active), WebKit positions fixed elements
-        // against an internal rect that tracks the visual viewport and is clamped to the document - its
-        // bottom sits well below where `innerHeight` says. Measure it with a zero-size fixed probe
-        // instead of assuming layout-viewport math; on engines without the quirk the probe bottom IS
-        // `innerHeight`, so this degenerates to the plain `innerHeight - height - offsetTop`.
-        const probe = this.renderer.createElement('div');
-        this.renderer.setCssProperties(probe, {
-            position: 'fixed',
-            'inset-block-end': '0',
-            'inline-size': '0',
-            'block-size': '0',
-            visibility: 'hidden',
+        return observeKeyboardInset({
+            view,
+            renderer: this.renderer,
+            onInset: (inset) => this.renderer.setCssProperty(host, '--_et-rte-keyboard-inset', `${inset}px`),
+            poll$: toObservable(this.dockedToolbar, { injector: this.injector }).pipe(switchMap((docked) => (docked ? interval(DOCKED_TOOLBAR_POLL_MS) : EMPTY))),
         });
-        this.renderer.appendChild(this.document.body, probe);
-        let lastApplied = -1;
-        const apply = () => {
-            const fixedBottom = probe.getBoundingClientRect().bottom;
-            let keyboardTop;
-            if (frameElement && topViewport) {
-                // keyboard overlap of this frame, in the frame's own client coordinates
-                const covered = frameElement.getBoundingClientRect().bottom - (topViewport.offsetTop + topViewport.height);
-                keyboardTop = view.innerHeight - Math.max(0, covered);
-            }
-            else {
-                keyboardTop = viewport.offsetTop + viewport.height;
-            }
-            const inset = Math.max(0, fixedBottom - keyboardTop);
-            if (inset === lastApplied)
-                return false;
-            lastApplied = inset;
-            this.renderer.setCssProperty(host, '--_et-rte-keyboard-inset', `${inset}px`);
-            return true;
-        };
-        // iOS moves its fixed-position rect ASYNCHRONOUSLY while scrolling with the keyboard open (and
-        // fires few or no visualViewport events mid-scroll, including when the scroll itself dismisses
-        // the keyboard) - a single synchronous re-measure per event reads a stale probe rect and the
-        // toolbar drifts under the keyboard. So each event kicks a rAF loop that keeps re-measuring
-        // until the inset has been stable for a few frames, then stops - continuous tracking while
-        // anything moves, zero per-frame work at rest.
-        let rafId = null;
-        let quietFrames = 0;
-        const settle = () => {
-            quietFrames = apply() ? 0 : quietFrames + 1;
-            // ~30 quiet frames (≈500ms) so the loop outlasts the keyboard show/hide animation - iOS can
-            // fire its last viewport event right at the animation's start while the fixed-position rect
-            // keeps moving until the end
-            rafId = quietFrames < 30 ? view.requestAnimationFrame(settle) : null;
-        };
-        const kick = () => {
-            quietFrames = 0;
-            apply();
-            rafId ??= view.requestAnimationFrame(settle);
-        };
-        kick();
-        // The event stream is not guaranteed to be complete: a soft keyboard can change height without a
-        // viewport event (Gboard switching layout, a suggestion row appearing), and inside an embedded
-        // frame the event may land while the ancestor layout is still moving. Either leaves the bar parked
-        // for a keyboard that is no longer there - floating over the content instead of sitting on it. So
-        // re-measure on a slow timer for as long as the bar is actually docked: one rect read every
-        // POLL_MS, no rAF loop and no change detection, and a stale position heals within half a second.
-        const poll$ = toObservable(this.dockedToolbar, { injector: this.injector }).pipe(switchMap((docked) => (docked ? interval(DOCKED_TOOLBAR_POLL_MS) : EMPTY)), tap(() => apply()));
-        const viewports = topViewport ? [viewport, topViewport] : [viewport];
-        // window scroll too: a root scroll pans the keyboard-tracking fixed rect without necessarily
-        // firing any visualViewport event (top window as well when embedded in an iframe)
-        const scrollTargets = [...viewports, view];
-        try {
-            if (frameElement && view.top)
-                scrollTargets.push(view.top);
-        }
-        catch {
-            // cross-origin top - its scrolls are invisible to us; the frame keeps local tracking
-        }
-        const viewportChange$ = merge(...viewports.map((v) => fromEvent(v, 'resize')), 
-        // These are ancestor viewports/windows (visualViewport, iframe top), not a component-owned
-        // scroll container - signalElementScrollState targets a known elementRef and doesn't apply.
-        // eslint-disable-next-line ethlete/prefer-scroll-state
-        ...scrollTargets.map((t) => fromEvent(t, 'scroll', { passive: true }))).pipe(tap(() => kick()));
-        return merge(poll$, viewportChange$).pipe(ignoreElements(), finalize(() => {
-            if (rafId !== null)
-                view.cancelAnimationFrame(rafId);
-            probe.remove();
-        }));
     }
     /** `editingActive` follows the editor's focus, but lingers ~400ms after a blur so a menu/link
      *  editor opened from the docked toolbar (which takes focus into an overlay) keeps the bar up. */
@@ -57132,6 +57244,7 @@ class NotificationDirective {
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         this.ariaRole = computed(() => (this.status() === 'error' ? 'alert' : 'status'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => this.animatedLifecycle?.enter());
         toObservable(computed(() => this.entry().isDismissing))
             .pipe(filter(Boolean), take(1), switchMap(() => {
             const lifecycle = this.animatedLifecycle;
@@ -57901,7 +58014,6 @@ const createNotificationRef = (config, { managerConfig, beforeChange }) => {
 class NotificationComponent {
     constructor() {
         this.notification = inject(NotificationDirective);
-        this.animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
         this.provideTheme = inject(ProvideColorDirective);
         this.provideSurface = inject(ProvideSurfaceDirective);
         this.managerConfig = injectNotificationManagerConfig();
@@ -57969,9 +58081,6 @@ class NotificationComponent {
                 this.provideSurface.clearForcedSurface();
             });
         });
-        afterNextRender(() => {
-            this.animatedLifecycle.enter();
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NotificationComponent, isStandalone: true, selector: "et-notification", host: { listeners: { "keydown.escape": "notification.ref().dismiss()", "mouseenter": "notification.ref().pauseTimer(\"hover\")", "mouseleave": "notification.ref().resumeTimer(\"hover\")", "focusin": "notification.ref().pauseTimer(\"focus\")", "focusout": "notification.ref().resumeTimer(\"focus\")" }, classAttribute: "et-notification" }, providers: [provideIcons(TIMES_ICON, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: NotificationDirective, inputs: ["ref", "ref"] }, { directive: NotificationSwipeToDismissDirective }, { directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }], ngImport: i0, template: "<div class=\"et-notification-content\">\n  <div class=\"et-notification-header\">\n    @if (statusIcon(); as icon) {\n      <i [etIcon]=\"icon\" class=\"et-notification-icon\"></i>\n    } @else if (notification.isLoading()) {\n      <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n    }\n\n    <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n    <button\n      [color]=\"controlsColor()\"\n      [attr.aria-label]=\"dismissLabel()\"\n      class=\"et-notification-dismiss-btn\"\n      et-icon-button\n      etNotificationDismiss\n      size=\"xs\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </div>\n\n  @if (notification.message()) {\n    <p class=\"et-notification-message\">{{ notification.message() }}</p>\n  }\n\n  @if (notification.progress() !== undefined) {\n    <et-progress-bar [value]=\"notification.progress()\" class=\"et-notification-progress-bar\" />\n  }\n\n  @if (notification.action() || notification.secondaryAction()) {\n    <div class=\"et-notification-footer\">\n      @if (notification.action(); as action) {\n        <button et-text-button etNotificationAction size=\"xs\" type=\"button\">{{ action.label }}</button>\n      }\n\n      @if (notification.secondaryAction(); as secondaryAction) {\n        <button\n          class=\"et-notification-secondary-action\"\n          et-text-button\n          etNotificationAction=\"secondary\"\n          size=\"xs\"\n          type=\"button\"\n        >\n          {{ secondaryAction.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-notification-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: true; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: true; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: true; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: true; initial-value: 0 4px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / 10%),0 0 0 1px rgb(var(--et-shadow-color-rgb, 0 0 0) / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: true; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-notification-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-notification{display:block;pointer-events:all;opacity:var(--_et-notification-swipe-opacity, 1);background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-inline-start:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height);--_et-notification-slide-x: 1rem;--_et-notification-dir-sign: 1}.et-notification:dir(rtl){--_et-notification-dir-sign: -1}.et-notification.et-animation-enter-from{opacity:0;transform:translate(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)))}.et-notification.et-animation-enter-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-to{opacity:0;transform:translate(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)))}.et-notification[data-swiped-away].et-animation-leave-to{transform:translate(var(--_et-notification-swipe-exit-x, 0px))!important;opacity:0}.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification{--_et-notification-slide-x: -1rem}.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-leave-to{transform:translateY(1rem)}.et-notification-stack[data-position=top-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=top-center] .et-notification.et-animation-leave-to{transform:translateY(-1rem)}.et-notification-header{display:flex;align-items:center;justify-content:space-between;gap:var(--et-notification-gap)}.et-notification-spinner{flex-shrink:0;--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}.et-notification-icon{flex-shrink:0;width:var(--et-notification-icon-size);height:var(--et-notification-icon-size);color:var(--et-theme-color-primary-solid, currentColor)}.et-notification-title{flex:1;font-weight:var(--et-notification-title-font-weight);font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification-dismiss-btn{flex-shrink:0;opacity:.4;transition:opacity .12s ease}@media(hover:hover){.et-notification-dismiss-btn:hover{opacity:.8}}.et-notification-message{margin:.4rem 0 0;color:var(--et-surface-color-muted-solid, inherit);opacity:var(--et-notification-message-opacity);font-size:var(--et-notification-message-font-size);line-height:var(--et-notification-message-line-height)}.et-notification-progress-bar{margin-top:.8rem;color:var(--et-theme-color-primary-solid, currentColor);--et-progress-bar-height: var(--et-notification-progress-bar-height)}.et-notification-footer{display:flex;align-items:center;gap:1.2rem;margin-top:.8rem}.et-notification .et-notification-secondary-action{color:var(--et-surface-color-muted-solid, inherit)}@media(max-width:480px){.et-notification{min-width:0;max-width:none}}@media(prefers-reduced-motion:reduce){.et-notification.et-animation-enter-from{transform:none}.et-notification.et-animation-enter-active,.et-notification.et-animation-leave-active{transition:opacity .2s ease}.et-notification.et-animation-leave-to{transform:none}}}\n"], dependencies: [{ kind: "directive", type: NotificationActionDirective, selector: "[etNotificationAction]", inputs: ["etNotificationAction"], exportAs: ["etNotificationAction"] }, { kind: "directive", type: NotificationDismissDirective, selector: "[etNotificationDismiss]", exportAs: ["etNotificationDismiss"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "component", type: ProgressBarComponent, selector: "et-progress-bar", inputs: ["value"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -59336,7 +59445,7 @@ class QueryErrorComponent {
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryErrorComponent, isStandalone: true, selector: "et-query-error", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-query-error-host" }, providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: QueryErrorDirective, inputs: ["error", "error", "query", "query", "alwaysAllowRetry", "alwaysAllowRetry", "labels", "labels"], outputs: ["retryRequest", "retryRequest"] }], ngImport: i0, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{padding-inline-start:1.5em}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "et-banner", inputs: ["heading", "description", "type", "dismissible", "liveRegion", "color"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryErrorComponent, isStandalone: true, selector: "et-query-error", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-query-error-host" }, providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: QueryErrorDirective, inputs: ["error", "error", "query", "query", "alwaysAllowRetry", "alwaysAllowRetry", "labels", "labels"], outputs: ["retryRequest", "retryRequest"] }], ngImport: i0, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{margin:0;padding-inline-start:1.2em;list-style:disc outside}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "et-banner", inputs: ["heading", "description", "type", "dismissible", "liveRegion", "color"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { 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.1.6", ngImport: i0, type: QueryErrorComponent, decorators: [{
             type: Component,
@@ -59348,7 +59457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-query-error-host',
-                    }, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{padding-inline-start:1.5em}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"] }]
+                    }, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{margin:0;padding-inline-start:1.2em;list-style:disc outside}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 const QUERY_ERROR_IMPORTS = [
@@ -63713,11 +63822,11 @@ const STREAM_LABELS = /* @__PURE__ */ toToken(STREAM_LABELS_DEF);
  */
 class StreamOverlayCardStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamOverlayCardStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StreamOverlayCardStylesComponent, isStandalone: true, selector: "et-stream-overlay-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{display:flex;flex-direction:column;align-items:center;gap:var(--et-stream-overlay-card-gap, 12px);padding:var(--et-stream-overlay-card-padding, 32px);border-radius:var(--et-stream-overlay-card-border-radius, 16px);max-width:36rem;text-align:center;background:var(--et-surface-background-solid, inherit)}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StreamOverlayCardStylesComponent, isStandalone: true, selector: "et-stream-overlay-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--et-stream-overlay-card-gap, 12px);inline-size:100%;block-size:100%;padding:var(--et-stream-overlay-card-padding, 16px);overflow:auto;border-radius:var(--et-stream-overlay-card-border-radius, 0px);text-align:center;background:var(--et-surface-background-solid, inherit);container-type:size}.et-stream-consent-card>*,.et-stream-player-error-card>*,.et-pip-slot-placeholder-card>*{flex:none;max-inline-size:36rem}@container (max-height: 200px){.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{display:none}}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamOverlayCardStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-stream-overlay-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{display:flex;flex-direction:column;align-items:center;gap:var(--et-stream-overlay-card-gap, 12px);padding:var(--et-stream-overlay-card-padding, 32px);border-radius:var(--et-stream-overlay-card-border-radius, 16px);max-width:36rem;text-align:center;background:var(--et-surface-background-solid, inherit)}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"] }]
+            args: [{ selector: 'et-stream-overlay-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--et-stream-overlay-card-gap, 12px);inline-size:100%;block-size:100%;padding:var(--et-stream-overlay-card-padding, 16px);overflow:auto;border-radius:var(--et-stream-overlay-card-border-radius, 0px);text-align:center;background:var(--et-surface-background-solid, inherit);container-type:size}.et-stream-consent-card>*,.et-stream-player-error-card>*,.et-pip-slot-placeholder-card>*{flex:none;max-inline-size:36rem}@container (max-height: 200px){.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{display:none}}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"] }]
         }] });
 /** @internal */
 const mountStreamOverlayCardStyles = () => injectStyleManager().mount(StreamOverlayCardStylesComponent);
@@ -63760,7 +63869,7 @@ class StreamConsentComponent {
         {{ acceptLabel() }}
       </button>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "directive", type: StreamConsentAcceptDirective, selector: "[etStreamConsentAccept]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "directive", type: StreamConsentAcceptDirective, selector: "[etStreamConsentAccept]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamConsentComponent, decorators: [{
             type: Component,
@@ -63777,7 +63886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'et-stream-consent',
                         role: 'group',
                         '[attr.aria-labelledby]': 'HEADING_ID',
-                    }, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"] }]
+                    }, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 const STREAM_PLAYER_ERROR_CONTEXT_TOKEN = new InjectionToken('STREAM_PLAYER_ERROR_CONTEXT_TOKEN');
@@ -63846,7 +63955,7 @@ class StreamPlayerErrorComponent {
         {{ retryLabel() }}
       </button>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamPlayerErrorComponent, decorators: [{
             type: Component,
@@ -63862,7 +63971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [StreamPlayerErrorDirective], host: {
                         class: 'et-stream-player-error',
                         role: 'alert',
-                    }, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"] }]
+                    }, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 const DEFAULT_STREAM_PLAYER_LOADING_CONFIG = {
@@ -65553,12 +65662,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }] });
 
+/** @internal */
+class PipStageStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: PipStageStylesComponent, isStandalone: true, selector: "et-pip-stage-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-pip-window:has(.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)):not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-pip-window:has(.et-stream-pip-chrome__stage--grid):not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell--featured{transform:none}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:after{pointer-events:auto}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible{outline:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-pip-stage-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-pip-window:has(.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)):not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-pip-window:has(.et-stream-pip-chrome__stage--grid):not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell--featured{transform:none}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:after{pointer-events:auto}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible{outline:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"] }]
+        }] });
+/** @internal */
+const mountPipStageStyles = () => injectStyleManager().mount(PipStageStylesComponent);
+
 class PipStageDirective {
     constructor() {
         this.chrome = inject(PIP_CHROME_REF_TOKEN);
+        mountPipStageStyles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PipStageDirective, isStandalone: true, selector: "[etPipStage]", host: { properties: { "style.--et-pip-grid-cols": "chrome.state.gridCols()", "style.--et-pip-grid-rows": "chrome.state.gridRows()" }, classAttribute: "et-stream-pip-chrome__stage" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PipStageDirective, isStandalone: true, selector: "[etPipStage]", host: { properties: { "class.et-stream-pip-chrome__stage--grid": "chrome.state.multiView()", "style.--et-pip-grid-cols": "chrome.state.gridCols()", "style.--et-pip-grid-rows": "chrome.state.gridRows()" }, classAttribute: "et-stream-pip-chrome__stage" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageDirective, decorators: [{
             type: Directive,
@@ -65566,11 +65688,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     selector: '[etPipStage]',
                     host: {
                         class: 'et-stream-pip-chrome__stage',
+                        '[class.et-stream-pip-chrome__stage--grid]': 'chrome.state.multiView()',
                         '[style.--et-pip-grid-cols]': 'chrome.state.gridCols()',
                         '[style.--et-pip-grid-rows]': 'chrome.state.gridRows()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // codes 1600-1699
 const STREAM_ERROR_CODES = {
@@ -65748,7 +65871,7 @@ class StreamPipChromeComponent {
                     return chrome.state.windowAspectRatio;
                 },
             },
-        ], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamPipChromeComponent, decorators: [{
             type: Component,
@@ -65776,7 +65899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], hostDirectives: [ProvideSurfaceDirective], host: {
                         class: 'et-stream-pip-chrome',
                         '[class.et-stream-pip-chrome--grid]': 'state.multiView()',
-                    }, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"] }]
+                    }, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n" }]
         }], ctorParameters: () => [], propDecorators: { stageRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipStageDirective), { ...{ read: ElementRef }, isSignal: true }] }], pipWindowRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipWindowComponent), { isSignal: true }] }], gridBtnRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipGridToggleDirective), { ...{
                             read: ElementRef,
                         }, isSignal: true }] }] } });
@@ -65850,7 +65973,7 @@ class PipSlotPlaceholderComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"], dependencies: [{ kind: "directive", type: PipBringBackDirective, selector: "[etPipBringBack]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"], dependencies: [{ kind: "directive", type: PipBringBackDirective, selector: "[etPipBringBack]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipSlotPlaceholderComponent, decorators: [{
             type: Component,
@@ -65866,7 +65989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </div>
       </div>
     }
-  `, encapsulation: ViewEncapsulation.None, imports: [PipBringBackDirective, ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(ARROW_OUT_UP_RIGHT_ICON)], styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [PipBringBackDirective, ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(ARROW_OUT_UP_RIGHT_ICON)], styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bringBackDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipBringBackDirective), { isSignal: true }] }] } });
 
 const PIP_CHROME_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
@@ -77114,7 +77237,7 @@ const provideUnsavedChangesAlertDialog = () => provideUnsavedChangesConfirm(() =
 
 // 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.71';
+const COMPONENTS_VERSION = '1.0.0-next.73';
 
 /**
  * Generated bundle index. Do not edit.